[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8665":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":42,"readmeContent":43,"aiSummary":44,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":45,"discoverSource":46},8665,"varlet","varletjs\u002Fvarlet","varletjs","A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.","https:\u002F\u002Fvarletjs.org\u002F#\u002Fen-US\u002Fhome",null,"Vue",5324,627,43,15,0,7,16,2,69.49,"MIT License",false,"dev",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41],"components","javascript","js","material","material-design","material-design-3","material-design-you","mobile","ts","typescript","ui","ui-kit","ui-library","vue","vue3","vuejs3","2026-06-12 04:00:40","\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fvarletjs.org\u002F#\u002Fen-US\u002Findex\">\n    \u003Cimg src=\"https:\u002F\u002Fvarletjs.org\u002Flogo.svg\" width=\"150\">\n  \u003C\u002Fa>\n  \u003Ch1>VARLET\u003C\u002Fh1>\n  \u003Cp>A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.\u003C\u002Fp>\n  \u003Cp>\n    \u003Ca href=\"https:\u002F\u002Fvarletjs.org\u002F#\u002Fen-US\u002Findex\">Documentation\u003C\u002Fa> |\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Fblob\u002Fdev\u002FREADME.zh-CN.md\">中文介绍\u003C\u002Fa>\n  \u003C\u002Fp>\n  \u003Cp>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@varlet\u002Fui?style=flat-square\" alt=\"version\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fvarletjs\u002Fvarlet\" alt=\"stars\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvue-v3.2.0%2B-%23407fbc\" alt=\"vue\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002F@varlet\u002Fui.svg\" alt=\"license\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Fvarletjs\u002Fvarlet\" alt=\"coverage\">\n    \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Fworkflows\u002FCI\u002Fbadge.svg\" alt=\"ci\">\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n\n---\n\n### Intro\n\nVarlet is a `Vue3` component library based on Material Design 2 and 3, supporting mobile and desktop, developed and maintained by `varletjs` organization.\n\n\n### Features\n\n- 🚀   Provide 60+ high quality general purpose components\n- 🚀   Components are very lightweight\n- 💪   Developed by Chinese, complete Chinese and English documentation and logistics support\n- 🛠️   Support on-demand introduction\n- 🛠️   Support theme customization\n- 🌍   Support internationalization\n- 💡   Support WebStorm syntax highlighting\n- 💪   Support the SSR\n- 📦   Support [Nuxt Module](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet-nuxt)\n- 💡   Support the Typescript\n- 💪   Make sure more than 90 percent unit test coverage, providing stability assurance\n- 🎨   Supports both Material Design 2 and Material Design 3 design systems\n- 🛠️   Support dark mode\n- 🔧   Provide official VSCode extension\n- ⌨️   Support Accessibility (still improving)\n\n### Install\n\n### CDN\n`varlet.js` contain all the styles and logic of the component library, and you can import them.\n\n```html\n\u003Cdiv id=\"app\">\u003C\u002Fdiv>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fvue\">\u003C\u002Fscript>\n \u003C!-- Desktop Adaptation -->\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@varlet\u002Ftouch-emulator\u002Fiife.js\">\u003C\u002Fscript>\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@varlet\u002Fui\u002Fumd\u002Fvarlet.js\">\u003C\u002Fscript>\n\u003Cscript>\n  const app = Vue.createApp({\n    template: '\u003Cvar-button>Button\u003C\u002Fvar-button>'\n  })\n  app.use(Varlet).mount('#app')\n\u003C\u002Fscript>\n```\n\n### Webpack \u002F Vite\n```shell\n# Install with npm or yarn or pnpm\n\n# npm\nnpm i @varlet\u002Fui -S\n\n# yarn\nyarn add @varlet\u002Fui\n\n# pnpm\npnpm add @varlet\u002Fui\n```\n\n```js\nimport App from '.\u002FApp.vue'\nimport Varlet from '@varlet\u002Fui'\nimport { createApp } from 'vue'\nimport '@varlet\u002Fui\u002Fes\u002Fstyle'\n\ncreateApp(App).use(Varlet).mount('#app')\n```\n\n### Official Ecosystem\n\nThe following projects are maintained by the official team for a long time.\n\n| Name | Description |\n|------------------------------------------------------------------------------------------------------|--------------------------------------|\n| [@varlet\u002Fcli](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-cli) | `Vue3 component library rapid prototyping tool` |\n| [@varlet\u002Ftouch-emulator](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-touch-emulator) | `Desktop adapter, so that the mobile component library can run on the desktop` |\n| [@varlet\u002Fui-playground](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-ui-playground) | `Varlet component library online editing tool` |\n| [@varlet\u002Fimport-resolver](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-import-resolver)  | `A resolver for` [unplugin-vue-components](https:\u002F\u002Fgithub.com\u002Funplugin\u002Funplugin-vue-components) ` used to implement Varlet and import it on demand`   |\n| [@varlet\u002Fpreset-unocss](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-preset-unocss)  | [UnoCss](https:\u002F\u002Funocss.dev\u002F) `presets for varlet` |\n| [@varlet\u002Fpreset-tailwindcss](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-preset-tailwindcss)  | [tailwindcss](https:\u002F\u002Ftailwindcss.com\u002F) `presets for varlet` |\n| [varlet-theme-builder](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet-theme-builder) | `Theme generator for generating theme variables for varlet Material Design 3` | \n| [varlet-vscode-extension](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Ftree\u002Fdev\u002Fpackages\u002Fvarlet-vscode-extension) | `Varlet Component Library VSCode Plugin` |\n| [vscode-theme-varlet](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvscode-theme-varlet)  | `Varlet VSCode Theme`   |\n| [varlet-app-example](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet-app-template)  | `Varlet component library app template`   |\n| [varlet-install-example](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet-install-example)  | `Case collection of Varlet component library and various ecosystem integration` |\n\n### Community Ecosystem\n\nThe following projects are maintained by community personnel, welcome to add.\n\n| Name | Description |\n|----------------------------------------------------------------|-----------------------------------------|\n| [vue-h5-template](https:\u002F\u002Fgithub.com\u002Fsunniejs\u002Fvue-h5-template) | `Vue-based mobile template scaffolding, providing mobile presets for Varlet component library` |\n| [create-vite-app](https:\u002F\u002Fgithub.com\u002FErKeLost\u002Fcreate-vite-app) | `A desktop template scaffolding based on Vue3, providing desktop presets for Varlet component library` |\n| [vscode-common-intellisense](https:\u002F\u002Fgithub.com\u002FSimon-He95\u002Fvscode-common-intellisense) | `A VS Code extension that provides better intellisense to Varlet developers` |\n| [vue3-varlet-mobile](https:\u002F\u002Fgithub.com\u002Fvue-zone\u002Fvue3-varlet-mobile) | `A mobile template based on Vue 3 and Varlet Component Library` |\n\n### Playground\n\nSee [Varlet UI Playground](https:\u002F\u002Fvarletjs.org\u002Fplayground).\n\n### Contribution\n\nSee [Contributing Guide](https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Fblob\u002Fdev\u002F.github\u002FCONTRIBUTING.md).\n\n### GitCode Repo\n\nSee [Here](https:\u002F\u002Fgitcode.com\u002Fvarletjs\u002Fvarlet).\n\n### Thanks to contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvarletjs\u002Fvarlet\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=varletjs\u002Fvarlet\" \u002F>\n\u003C\u002Fa>\n\n### Thanks to the following sponsors\n\n\u003Ca href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fvarletjs\u002Fvarlet-static\u002Fsponsorkit\u002Fsponsors.svg\">\n  \u003Cimg src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fvarletjs\u002Fvarlet-static\u002Fsponsorkit\u002Fsponsors.svg\">\n\u003C\u002Fa>\n\n### Sponsor this project\n\nSponsor this project to support our better creation. \n\n#### Wechat \u002F Alipay\n\n\u003Cimg style=\"width: 25%\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fvarletjs\u002Fvarlet-static\u002Fwechat.jpg\" \u002F>\n\u003Cimg style=\"width: 25%\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fvarletjs\u002Fvarlet-static\u002Falipay.jpg\" \u002F>\n","Varlet 是一个基于 Material Design 2 和 3 的 Vue3 组件库，支持移动和桌面端应用。它提供了超过60个高质量的通用组件，这些组件设计轻量且功能丰富，包括主题定制、国际化支持、WebStorm 语法高亮、SSR 支持以及 TypeScript 支力。此外，Varlet 还具备90%以上的单元测试覆盖率，确保了其稳定性和可靠性。此项目非常适合需要快速构建美观且响应式的用户界面的应用场景，无论是开发移动端还是桌面端应用都能提供良好的用户体验。","2026-06-11 03:19:10","top_language"]