1. Project Overview

VARLET

A Vue 3-based mobile component library featuring Material Design.

Varlet is a Material Design mobile component library based on Vue3 , fully embracing the Vue3 ecosystem and maintained by the varletjs community team.

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

Varlet is a Material Design mobile component library built with Vue 3, fully embracing the Vue 3 ecosystem and developed and maintained by the varletjs community team.

Features

• Provides 60+ high-quality general-purpose components
• Extremely lightweight components
• Developed by Chinese developers, with comprehensive Chinese and English documentation and ongoing support
• ️ Supports on-demand imports
• ️ Supports custom themes
• Supports Internationalization
• Supports component property highlighting in WebStorm
• Supports SSR
• Supports TypeScript
• Maintains over 90% unit test coverage to ensure stability
• ️ Supports dark mode
• ️ Provides an official VSCode plugin

5. Tech Stack

Installation

CDN

varlet.js Includes all component library styles and logic. Simply import it to get started.

<div id="app"></div>
<script src="[https://cdn.jsdelivr.net/npm/vue\](https://cdn.jsdelivr.net/npm/vue\)"></script>
 <!-- Desktop compatibility -->
<script src="[https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js\](https://cdn.jsdelivr.net/npm/@varlet/touch-emulator/iife.js\)"></script>
<script src="[https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js\](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>

Webpack / Vite

# Install via npm, 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')