Home > Web Front-end > Vue.js > body text

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

青灯夜游
Release: 2022-10-26 19:30:22
Original
11441 people have browsed it

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/

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

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

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

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/

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

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

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

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/

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

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/

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

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/

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

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

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

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

17 Vue3 practical UI component libraries (Web + mobile) to sharePrimeVue 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/

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

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.

17 Vue3 practical UI component libraries (Web + mobile) to shareVuestic 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/

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

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/

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

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

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

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

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

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

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!