VARLET

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

Documentation | 中文介绍

Varlet is a Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by varletjs organization.

• 🚀   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/ui

import App from './App.vue'
import Varlet from '@varlet/ui'
import { createApp } from 'vue'
import '@varlet/ui/es/style'

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

You can get more information about varlet by asking in AI Agent for documentation. Thanks to qile AI for providing service support.

The following projects are maintained by the official team for a long time.

The following projects are maintained by community personnel, welcome to add.

See Varlet UI Playground.

See Contributing Guide.

See Here.

We recommend that issue be used for problem feedback, or others:

• Wechat group

• Join the Discord

Sponsor this project to support our better creation.