17 Vue3 practical UI component libraries (Web + mobile) to share

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. Web UI library

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.

Vuestic UI team Epicmax is one of the top 15 Vue.js development teams in the world. The responsive design enables these components to be used not only on web PC projects, but also Works on almost any screen size resolution. Keyboard Usability is a Vuestic feature that provides seamless keyboard support throughout the framework.

Technical features:

Compatible with Vue3, built-in 52 beautiful responsive components, rich in functions
Supports keyboard navigation and smooth experience, which is rare in popular component libraries
Supports global configuration of components through configuration files and CSS variables
Built-in 2 sets of color theme schemes
Supports tree shaking optimization and reduces packaging volume
Supports i18n internationalization
Compatible with non-IE browsers

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

• Excellent performance, average component size is less than 1KB (min gzip)

• 70 high-quality components, covering mainstream mobile scenarios

• Zero external dependencies, no reliance on third-party npm packages

• Written in TypeScript, providing complete type definitions

• Unit test coverage exceeds 90%, providing stability guarantee

• Provide rich Chinese and English documents and component examples

• Provide Sketch And Axure design resources

• Support Vue 2, Vue 3 and WeChat applet

• Support theme customization, built-in 700 theme variables

• Support on-demand introduction and Tree Shaking

• Support accessibility (under continuous improvement)

• Support Dark mode (supported starting from Vant 4)

• Supports server-side rendering

• Supports internationalization, built-in 20 language packs

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

##NutUI 3.0 new version features

70 high-quality components (20 more than the old version)
Based on JD APP 9.0 visual specifications (the old version was based on JD APP 7.0)
Also supports on-demand citation
More detailed documentation and examples
Supports TypeScript
Support server-side rendering (friendly for SEO needs)
Support customized themes
Unit test coverage

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

Varlet Technology Features:

Provides 50 high-quality, lightweight common components
Developed by Chinese people and provides complete Chinese/ English documentation
Supports on-demand introduction and theme customization, supports dark mode
Supports internationalization
Support webstorm, vscode editor component attribute highlighting
Support SSR server-side rendering
Support Typescript
Ensure more than 90% unit test coverage

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

Technical characteristics of lottery components

Contains a total of 12 lottery components
The UI design is based on JD APP 10.0 visual specifications
Official website provided Detailed documentation and ample code examples
Based on Vue 3.0, also supports TypeScript, supports introduction on demand
Convenient and flexible custom settings

Covering 12 common lottery components

TurnTable Big Roulette Lottery
Marquee Marquee Lottery
SquareNine Nine-Panel Lottery
ScratchCard Scratch Card Lottery
GiftBox Mysterious Gift Box
LottoRoll Lottery Machine
Hiteggs Golden Egg Smash
GiftRain Red Packet Rain
LuckShake Shake
DollMachine Claw Machine

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