It has been almost 2 years since Vue3 was officially released. In February this year, it officially became the default version of the Vue project. All major component libraries and frameworks have supported and optimized Vue 3. This article will share it with you. 17 Vue3 practical UI component libraries, including Web UI library and mobile UI library, I hope it will be helpful to everyone!
1. ElementUI Plus
A set for developers , a desktop component library based on Vue 3.0 prepared by designers and product managers. (Learning video sharing: vuejs tutorial)
Official address: https://element-plus.org/zh-CN/
2. Ant Design of Vue
Ant Design’s Vue implementation, development and service for enterprise-level backend products
Official address: https ://www.antdv.com/docs/vue/introduce-cn
Ant Design Vue is a very mature framework, and it is very simple to create user interfaces using Ant Design Vue , these components can adapt to a variety of icon styles, fonts, and black themes. Ant Design Vue continues to improve its more than 60 components, basically covering most of the project's needs, and making them better and easier to access.
The Ant Design package on Vue3 is smaller, feels lighter, and supports SSR (also includes composition API). Ant Design has mature complex components such as data tables, statistics boxes, pop confirmations, modals and pop up.
3. BalmUI
Based on Google’s Material Design, comes with Vue plug-ins and instructions, as well as highly customizable components from simple to complex
Official address: https://next-material.balmjs.com/
BalmUI is a software developed by Balm.js (a similar Vue CLI's front-end workflow tool) team builds a front-end UI component library based on the latest Vue 3. It is ready to use out of the box, highly customizable, and the design style fully follows Google's Material Design design specifications. It is a very excellent interactive experience UI component library.
Features:
Extracted from the interactive effects and visual style of enterprise-level middle and back-end products, beautiful and elegant, with excellent detail experience
Ready to use right out of the box. It is not only a high-quality Vue component, but also has a large number of packaged plug-ins/instructions/common tool libraries for calling
built-in icon libraries. Integrate the latest Material Icons icon library
All components and plug-ins are highly customizable and can be used independently
4. Naive UI
Tucson Vue3 component library, a free open source front-end UI component library based on Vue 3.0/TypeScript, complete documentation, non-big factory KPI project!
Official address: https://www.naiveui.com/zh-CN/os-theme
Naive UI is a relatively new version based on the current The front-end UI component library developed by the Vue 3.0/TypeScript technology stack. The author is from TuSimple. It was initially maintained and used internally for two years. Now it is open sourced in the Github community. It is recommended to everyone who likes free open source.
Features:
Rich and complete components, more than 70 common business components, support the introduction on demand
Officially provided themes The editor does not use cumbersome less, sass, css variables, or webpack loaders. It uses an advanced type-safe theme system built by TypeScript
It runs quickly, is compact and lightweight, Specifically optimized for style, all components can be treeshaked [1], and there is no need to import any CSS for the components to work properly
5. arco.design
ByteDance enterprise-level product design system supports dual versions of React and Vue
Official address: https://arco.design/
ArcoDesign is upgraded based on Byte Design within ByteDance. After nearly 3 years of polishing, and through a large amount of business accumulation and verification within Byte, it was successfully held at the "Rare Earth Developer Conference" hosted by the Nuggets. Open sourced in 2021, this is not just a UI component library, but a comprehensive enterprise-level product design system.
ArcoDesign mainly solves the problem of seamlessly connecting product design and development to improve quality and efficiency when creating middle and back-end applications. Currently, ArcoDesign mainly serves the experience design and technical implementation of ByteDance's mid- and back-end products, and is mainly built and maintained by UED design and development students.
Highlights:
Provide systematic and comprehensive design specifications and resources, covering product design, UI design and post-development
React and Vue synchronization support. Two sets of UI component libraries, React and Vue, are also provided. The Vue component library is developed based on Vue 3.0
Supports one-click activation of dark mode and seamless switching
Provides best practices Arco Pro, organized Common page scenarios are identified to help users quickly initialize projects and use page templates to build mid- and back-end applications from 0 to 1
6. Quasar
Easily build high-performance and high-quality Vue.js 3 user interface, easy to use, but no Chinese documentation
Official address: https://quasar.dev/
Quasar is a complete, performance-focused framework that helps build Vue user interfaces (SPA, PWA, SSR, mobile and desktop). In addition to Vue, Node and Webpack, Quasar Also included are Cordova, Capacitor, and Electron, which help build desktop and mobile experiences without having to learn them separately.
7. iDUX
Vue3.x UI component library, completely developed using TypeScript
Official address: https: //idux.site/
8. TDesign
Tencent business team is serving An enterprise-level design system accumulated in the business process
Official address: https://tdesign.tencent.com/
Development documents: https://tdesign.tencent.com/vue -next/overview
##9. PrimeVue
##Easy to use, multi-functional, high High-performance Vue UI component library
Official address: https://www.primefaces.org/primevue/
A free open source, highly customizable front-end UI component library based on Vue 3, from An excellent front-end UI component library from abroad is very unique and worth studying and getting started with.
PrimeVue is a very excellent Vue UI component library that supports Vue 3 web UI component library. It has rich components, strong customization, clear official website documentation, and code examples. It is sufficient, and the Chinese culture is also very good. It is a Vue component library with strong usability.
10. DevUIHuawei’s UI components designed based on Vue3 and DevUI
Official address: https://vue -devui.github.io/
11. vuestic-uiFree and Open source UI library, the UI is very beautiful, and there is a backend management interface available.
Official address: https://vuestic.dev/
Vuestic UI is a set of web development component libraries based on Vue.js developed by the Epicmax team. It has recently been updated and released Vue3 version, hoping to use the expertise of Vue.js to best build a highly usable and comprehensive open source tool. Soon after its release, Vuestic UI became one of the most popular component libraries built with Vue.
%20to%20share "16661479844965417 Vue3 practical UI component libraries (Web + mobile) to share")
12. Headless UI Completely styleless , fully accessible UI components designed to integrate perfectly with Tailwind CSS.
Official address: https://headlessui.com/
13. View UI Plus
Enterprise-level UI component library and front-end solution based on Vue.js 3
Official address: https://www.iviewui.com/
View UI Plus is a set of UI component libraries based on Vue.js 3 in the View Design design system, mainly used in enterprises Level mid- and back-end systems.
2. Mobile UI library
14. Vant
Vant is a lightweight, reliable mobile component library that was open sourced in 2017.
Official address: https://vant-contrib.gitee.io/vant/#/zh-CN/
##Features
15. NutUI
NutUI is a JD-style Vue mobile component library that develops and serves mobile Web interfaces Enterprise grade products. Official address: https://nutui.jd.com/#/
16. VarletMaterial style mobile component library with very complete documentation. Recommended by You Yuxi and worth paying attention to.
Official address: https://varlet.gitee.io/varlet-ui/#/zh-CN/home
17. nutui-bingo By A lottery component library based on NutUI Vue 3 produced by the JD NutUI front-end team, used to quickly develop lottery gameplay for marketing activities and mini-game scenarios.
Official address: https://nutui.jd.com/bingo/#/
ShakeDice ShakeDice
GuessGift You hide it and I guess
(Learning video sharing: web Front-end development, Introduction to programming)
The above is the detailed content of 17 Vue3 practical UI component libraries (Web + mobile) to share. For more information, please follow other related articles on the PHP Chinese website!
%20to%20share "16661467061876717 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661467541423317 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661471163018717 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661473311257417 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "1666147517965617 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661477652366717 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661479137459317 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661486904709617 Vue3 practical UI component libraries (Web + mobile) to share")
%20to%20share "16661488165506917 Vue3 practical UI component libraries (Web + mobile) to share")
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
