A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
Documentation(Vercel) | Documentation(Gitee) | 中文README
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/@varlet/ui/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 @varlet/ui -S
# yarn
yarn add @varlet/ui
# pnpm
pnpm add @varlet/uiimport App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/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 |
| @varlet/ui-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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent