• Stars
    star
    4,964
  • Rank 8,428 (Top 0.2 %)
  • Language Vue
  • License
    MIT License
  • Created about 4 years ago
  • Updated about 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

VARLET

Material design mobile component library for Vue3

Documentation(Vercel) | Documentation(Gitee) | 中文README

version stars vue licence coverage gzip ci


Intro

Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by varletjs community team.

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
  • 💡   Support the Typescript
  • 💪   Make sure more than 90 percent unit test coverage, providing stability assurance
  • 🛠️   Support dark mode
  • 🛠️   Provide official VSCode extension

Install

CDN

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>

Webpack / Vite

# 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')

Playground

See Varlet UI Playground.

Contribution

See Contributing Guide.

Start On Cloud IDE

See Cloud IDE.

Community

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

  • Wechat group

Thanks to contributors

Thanks to the following sponsors

Sponsor this project

Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.

Afdian

https://afdian.net/a/haoziqaq

Wechat / Alipay

More Repositories

1

varlet-vue2

Material design mobile component library for Vue2 / 基于 Vue2 的 Material design 风格移动端组件库
Vue
149
star
2

varlet-app-template

An out-of-the-box mobile web template, developed based on Vue3, Varlet, Vite, Typescript.
Vue
125
star
3

axle

Progressive request tool based on axios.
TypeScript
105
star
4

varlet-resume

A resume template based on Varlet / 一个基于 Varlet 的简历模板
HTML
42
star
5

varlet-ute

Varlet UTE is a theme editing tool developed based on VARLET / Varlet UTE 是一个基于 VARLET 开发的主题编辑工具
Vue
40
star
6

varlet-icons-library-starter

A starter template for building an icon library, supporting vue3 and react.
TypeScript
38
star
7

varlet-install-example

Varlet and various ecosystem combination installation cases
Vue
33
star
8

varlet-ui-pro

A free varlet-ui integrated development scheme.
Vue
29
star
9

varlet-nuxt

Varlet module for Nuxt
Vue
26
star
10

varlet-lowcode

lowcode engine for varlet
TypeScript
19
star
11

varlet-schema

Lightweight Schema renderer based on Vue3
TypeScript
11
star
12

bounce-fixer

Fixed bouncing caused by pull up or pull down on mobile web pages
JavaScript
9
star
13

varlet-iconx

A collection of tools that provide icon solutions for varlet.
TypeScript
9
star
14

varlet-h5-lite-starter

Quickly start a project with Varlet UI
TypeScript
6
star
15

varlet-static

Static files for varlet
TypeScript
5
star
16

axle-vscode-extension

Axle extension for vscode
JavaScript
5
star
17

vscode-theme-varlet

A vscode theme for varlet
4
star
18

varlet-release

Release all packages and generate changelogs
TypeScript
3
star
19

varlet-design-resources

Design resources for varlet
1
star
20

varlet-app-template-lite

Lightweight version of varlet-app-template
TypeScript
1
star
21

varlet-theme-builder

Theme generator for generating theme variables for varlet Material Design 3
Vue
1
star