Varlet：70+ 组件的 Vue3 移动端组件库，用 touch-emulator 跑到桌面

Varlet 是由 varletjs 组织开发和维护的 Vue3 组件库，基于 Material Design 2 和 Material Design 3 两套设计体系，面向移动端，同时通过适配层支持桌面端运行。组件数量 70+，单元测试覆盖率保持在 90% 以上。

项目信息

• 官网文档：https://varletjs.org/#/en-US/index
• GitHub：https://github.com/varletjs/varlet
• npm：@varlet/ui
• Nuxt Module：https://github.com/varletjs/varlet-nuxt
• Playground：https://varletjs.org/playground

特性

• 提供 70+ 通用组件
• 组件体积轻量
• 中英文文档完整
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 WebStorm 语法高亮
• 支持 SSR
• 支持 Nuxt Module
• 支持 TypeScript
• 单元测试覆盖率确保在 90% 以上，提供稳定性保证
• 同时支持 Material Design 2 与 Material Design 3 设计体系
• 支持暗色模式
• 提供官方 VSCode 扩展（varlet-vscode-extension）
• 支持无障碍访问（仍在完善中）

安装

CDN

app.use(Varlet).mount('#app')

其中 @varlet/touch-emulator 负责把移动端组件库的触控交互映射到桌面环境。

Webpack / Vite

npm i @varlet/ui -S
# 或
yarn add @varlet/ui
# 或
pnpm add @varlet/ui

import Varlet from '@varlet/ui'
import '@varlet/ui/es/style'

createApp(App).use(Varlet).mount('#app')

官方生态

• @varlet/cli：Vue3 组件库快速原型开发工具
• @varlet/touch-emulator：桌面端适配器，让移动端组件库能在桌面运行
• @varlet/ui-playground：Varlet 组件库在线编辑工具
• @varlet/import-resolver：配合 unplugin-vue-components 实现按需引入的 resolver
• @varlet/preset-unocss：Varlet 的 UnoCss 预设（https://unocss.dev/）
• @varlet/preset-tailwindcss：tailwindcss 预设
• varlet-theme-builder：Material Design 3 主题变量生成器
• varlet-vscode-extension：VSCode 插件
• varlet-app-example：应用模板

Playground

在线编辑地址：https://varletjs.org/playground

License

以 npm 上 @varlet/ui 页面标注的 license 字段为准。