Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/haoziqaq/varlet

A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
https://github.com/haoziqaq/varlet

components javascript js material material-design material-design-3 mobile ts typescript ui ui-kit ui-library vue vue3 vuejs3

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/haoziqaq/varlet
Owner: varletjs
License: mit
Created: 2020-10-30T13:32:43.000Z (about 4 years ago)
Default Branch: dev
Last Pushed: 2024-06-28T09:34:15.000Z (4 months ago)
Last Synced: 2024-06-29T09:12:42.111Z (4 months ago)
Topics: components, javascript, js, material, material-design, material-design-3, mobile, ts, typescript, ui, ui-kit, ui-library, vue, vue3, vuejs3
Language: Vue
Homepage: https://varlet.pages.dev
Size: 41.4 MB
Stars: 4,798
Watchers: 47
Forks: 601
Open Issues: 13
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml

Awesome Lists containing this project

awesomeLibrary - varlet

README

        


  

    

  

  VARLET

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

  

    Documentation |

    中文介绍

  

  

    

    

    

    

    

    

  



---

### Intro

Varlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` 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

- 📦   Support [Nuxt Module](https://github.com/varletjs/varlet-nuxt)

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

```html



 

  const app = Vue.createApp({

    template: '<var-button>Button</var-button>'

  })

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

```

### Webpack / Vite

```shell

# Install with npm or yarn or pnpm

# npm

npm i @varlet/ui -S

# yarn

yarn add @varlet/ui

# pnpm

pnpm add @varlet/ui

```

```js

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

```

### AI Agent for documentation

You can get more information about `varlet` by asking in [AI Agent for documentation](https://gpt.qilepan.com/chat/share?shareId=y3ytky9ifjgl6fxtva1ai16h). Thanks to [qile AI](https://ai.qilepan.com/auth?type=register&invite=MjM0) for providing service support.

### Official Ecosystem

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

| Name | Description |

|------------------------------------------------------------------------------------------------------|--------------------------------------|

| [@varlet/cli](https://github.com/varletjs/varlet/tree/dev/packages/varlet-cli) | `Vue3 component library rapid prototyping tool` |

| [@varlet/touch-emulator](https://github.com/varletjs/varlet/tree/dev/packages/varlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |

| [@varlet/ui-playground](https://github.com/varletjs/varlet/tree/dev/packages/varlet-ui-playground) | `Varlet component library online editing tool` |

| [@varlet/import-resolver](https://github.com/varletjs/varlet/tree/dev/packages/varlet-import-resolver)  | `A resolver for` [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) ` used to implement Varlet and import it on demand`   |

| [@varlet/preset-unocss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-unocss)  | [UnoCss](https://unocss.dev/) `presets for varlet` |

| [@varlet/preset-tailwindcss](https://github.com/varletjs/varlet/tree/dev/packages/varlet-preset-tailwindcss)  | [tailwindcss](https://tailwindcss.com/) `presets for varlet` |

| [varlet-theme-builder](https://github.com/varletjs/varlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | 

| [varlet-vscode-extension](https://github.com/varletjs/varlet/tree/dev/packages/varlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |

| [vscode-theme-varlet](https://github.com/varletjs/vscode-theme-varlet)  | `Varlet VSCode Theme`   |

| [varlet-app-example](https://github.com/varletjs/varlet-app-template)  | `Varlet component library app template`   |

| [varlet-install-example](https://github.com/varletjs/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](https://github.com/sunniejs/vue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |

| [create-vite-app](https://github.com/ErKeLost/create-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |

| [vscode-common-intellisense](https://github.com/Simon-He95/vscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |

| [vue3-varlet-mobile](https://github.com/easy-temps/vue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |

### Playground

See [Varlet UI Playground](https://varletjs.org/playground).

### Contribution

See [Contributing Guide](https://github.com/varletjs/varlet/blob/dev/.github/CONTRIBUTING.md).

### Community

We recommend that [issue](https://github.com/varletjs/varlet/issues) be used for problem feedback, or others:

* Wechat group 



* Join the [Discord](https://discord.gg/Dmb8ydBHkw)

### Thanks to contributors



  



### Thanks to the following sponsors



  



### Sponsor this project

Sponsor this project to support our better creation. 

#### Wechat / Alipay