Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/varletjs/varlet
A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
https://github.com/varletjs/varlet
components javascript js material material-design material-design-3 mobile ts typescript ui ui-kit ui-library vue vue3 vuejs3
Last synced: 22 days 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/varletjs/varlet
- Owner: varletjs
- License: mit
- Created: 2020-10-30T13:32:43.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2024-04-23T07:48:53.000Z (about 2 months ago)
- Last Synced: 2024-04-23T21:48:45.452Z (about 2 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.gitee.io/varlet-ui/#/en-US/index
- Size: 39.8 MB
- Stars: 4,693
- Watchers: 48
- Forks: 598
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Lists
- awesome - varletjs/varlet - A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development. (Vue)
- awesome - varletjs/varlet - A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development. (Vue)
- awesome-stars-webVueBlog - varletjs/varlet - Material design mobile component library for Vue3 (Vue / 运维\&DevOps)
README
VARLET
A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
Documentation(Cloudflare) |
Documentation(Vercel) |
Documentation(Github) |
中文README
---
### 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 [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')
```
### 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.github.io/varlet/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. It is recommended to use afdian to subscribe, and your avatar will appear in this project.
#### Afdian
#### Wechat / Alipay
