Giter VIP home page Giter VIP logo

varlet's Introduction

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
  • 🛠️   Supports both Material Design 2 and Material Design 3 design systems
  • 🛠️   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')

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-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

Playground

See Varlet UI Playground.

Contribution

See Contributing Guide.

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

varlet's People

Contributors

haoziqaq avatar beadre avatar chouchouji avatar qytayh avatar wangkbweb avatar kanghuiyi66 avatar zhangmo8 avatar linkscope avatar ahqrt avatar a145789 avatar zhenyuwang avatar songjianet avatar chunhuigao avatar yuding2019 avatar sdhushu avatar jiechen66 avatar tiny-dust avatar wf-1202 avatar ayangweb avatar yhoney7 avatar gaoting avatar rss1102 avatar dyggod avatar erkelost avatar alec1815 avatar forestxiecode avatar aybrea avatar coderyarn avatar hutututtt avatar lxing4812 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.