varletjs/varletPublic

NotificationsYou must be signed in to change notification settings
Fork627
Star5.2k

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

License

MIT license

5.2k stars 627 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 4,755 Commits
.github		.github
packages		packages
scripts		scripts
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierignore		.prettierignore
CHANGELOG.md		CHANGELOG.md
CHECKLIST.md		CHECKLIST.md
LICENSE		LICENSE
README.md		README.md
README.zh-CN.md		README.zh-CN.md
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
prettier.config.js		prettier.config.js
tsconfig.json		tsconfig.json

Repository files navigation

VARLET

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

Documentation |中文介绍

Intro

Varlet is aVue3 component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained byvarletjs organization.

Features

🚀 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
📦 SupportNuxt 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)

Install

CDN

varlet.js contain all the styles and logic of the component library, and you can import them.

<divid="app"></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><!-- Desktop Adaptation --><scriptsrc="https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script><script>constapp=Vue.createApp({template:'<var-button>Button</var-button>'})app.use(Varlet).mount('#app')</script>

Webpack / Vite

# Install with npm or yarn or pnpm# npmnpm i @varlet/ui -S# yarnyarn add @varlet/ui# pnpmpnpm add @varlet/ui

importAppfrom'./App.vue'importVarletfrom'@varlet/ui'import{createApp}from'vue'import'@varlet/ui/es/style'createApp(App).use(Varlet).mount('#app')

Official Ecosystem

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`

Community Ecosystem

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`
vue3-varlet-mobile	`A mobile template based on Vue 3 and Varlet Component Library`