A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
Varlet is a Material design mobile component library developed based on Vue3
, developed and maintained by varletjs
community team.
- 🚀 Provide 60+ high quality general purpose components
- 🚀 Components are very lightweight
- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
- 🛠️ Support on-demand introduction
- 🛠️ Support theme customization
- 🌍 Support internationalization
- 💡 Support WebStorm syntax highlighting
- 💪 Support the SSR
- 📦 Support Nuxt Module
- 💡 Support the Typescript
- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
- 🎨 Supports both Material Design 2 and Material Design 3 design systems
- 🛠️ Support dark mode
- 🔧 Provide official VSCode extension
- ⌨️ Support Accessibility (still improving)
varlet.js
contain all the styles and logic of the component library, and you can import them.
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Desktop Adaptation -->
<script src="https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@devtea2025/perspiciatis-expedita-unde-rem/umd/varlet.js"></script>
<script>
const app = Vue.createApp({
template: '<var-button>Button</var-button>'
})
app.use(Varlet).mount('#app')
</script>
# Install with npm or yarn or pnpm
# npm
npm i @devtea2025/perspiciatis-expedita-unde-rem -S
# yarn
yarn add @devtea2025/perspiciatis-expedita-unde-rem
# pnpm
pnpm add @devtea2025/perspiciatis-expedita-unde-rem
import App from './App.vue'
import Varlet from '@devtea2025/perspiciatis-expedita-unde-rem'
import { createApp } from 'vue'
import '@devtea2025/perspiciatis-expedita-unde-rem/es/style'
createApp(App).use(Varlet).mount('#app')
The following projects are maintained by the official team for a long time.
Name | Description |
---|---|
@varlet/cli | Vue3 component library rapid prototyping tool |
@varlet/touch-emulator | Desktop adapter, so that the mobile component library can run on the desktop |
@devtea2025/perspiciatis-expedita-unde-rem-playground | Varlet component library online editing tool |
@varlet/import-resolver |
A resolver for unplugin-vue-components used to implement Varlet and import it on demand
|
@varlet/preset-unocss |
UnoCss presets for varlet
|
@varlet/preset-tailwindcss |
tailwindcss presets for varlet
|
varlet-theme-builder | Theme generator for generating theme variables for varlet Material Design 3 |
varlet-vscode-extension | Varlet Component Library VSCode Plugin |
vscode-theme-varlet | Varlet VSCode Theme |
varlet-app-example | Varlet component library app template |
varlet-install-example | Case collection of Varlet component library and various ecosystem integration |
The following projects are maintained by community personnel, welcome to add.
Name | Description |
---|---|
vue-h5-template | Vue-based mobile template scaffolding, providing mobile presets for Varlet component library |
create-vite-app | A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library |
vscode-common-intellisense | A VS Code extension that provides better intellisense to Varlet developers |
See Varlet UI Playground.
See Contributing Guide.
We recommend that issue be used for problem feedback, or others:
- Wechat group
- Join the Discord
Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.