This is the seventh day of my participation in the First Challenge 2022

Vue.js is a progressive javascript framework for building UIS (user interfaces) and SPA (single-page applications). The advent of UI component libraries has improved our development efficiency and enhanced the overall look, feel, interactivity, and accessibility of our applications. Here’s a look at some of the UI component libraries available for Vue.

1. Element UI

Element UI is a Vue 2.0-based desktop component library for developers, designers, and product managers. It is a UI component library for the Web, with React and Angular versions in addition to Vue.

Element UI features:

(1) Consistency

  • Consistent with real life: consistent with the flow and logic of real life, follow the language and concepts used by users;
  • Consistency in the interface: All elements and structures must be consistent, such as design style, ICONS and text, element placement, etc.

(2) Feedback

  • Control feedback: users can clearly perceive their own operations through interface styles and interactive effects;
  • Page feedback: After operation, the current state is clearly displayed through changes in page elements.

3) Efficiency

  • Simplified process: design simple and intuitive operation process;
  • Clear and explicit: clear language expression and clear meaning, so that users can quickly understand and make decisions;
  • Help users identify: simple and straightforward interface, let users quickly identify rather than recall, reduce user memory burden.

(4) Controllability

  • User decision-making: Operation suggestions or safety tips can be provided to users according to scenarios, but decisions cannot be made on behalf of users.
  • Controllable result: Users can perform operations freely, including undo, rollback, and termination of the current operation.

GitHub (Star: 51.6K) : github.com/ElemeFE/ele…

2. Ant Design of Vue

Ant Design Vue is a library of high-quality UI components implemented using Vue and conforming to Ant Design specifications for developing and serving enterprise-level backend products.

Ant Design of Vue

  • The interactive language and visual style of enterprise level background products are refined.
  • High quality Vue components out of the box.
  • Use the Ant Design of React Design tool.

GitHub (Star: 16K) : github.com/vueComponen…

3. Vue Material

Vue-material is a lightweight framework based on Google’s Material Design. It is a library of VUE components that implement Google pixel materials Design. It provides components with built-in dynamic themes for all modern Web browsers, and its API is straightforward.

Vue Material is a lightweight framework that builds on Google’s Material Design. Design powerful and beautiful Web applications for different screens.

GitHub (Star: 9.6K) : github.com/vuematerial…

4. BootStrap Vue

BootstrapVue is used to build responsive, mobile-first, ARIA projects (Accessible Rich Internet Applications, barrier-friendly applications), Based on vue.js and the world’s most popular CSS front-end framework – Bootstrap V4.

BootstrapVue has more than 40 plug-ins available and more than 80 custom UI components, instructions and more than 300 ICONS, which are fully compatible and conform to the specifications of Bootstrap V4.4 components and grid systems. It is based on vue.js V2.6 and has extensive and automatic WAI-ARIA accessibility friendly support.

GitHub (Star: 13.7k) : github.com/bootstrap-v…

5. Vuetify

Vuetify is a UI component library carefully built based on vuue. Js, and the whole set of UI is designed with Material style. Allows developers without any design skills to create stylish Material style interfaces.

Material Design is a colorful, animated Design language from Google that aims to provide a more consistent and extensive “look and feel” for phones, tablets, desktops and “other platforms.”

Vuetify features:

  • All components comply with Material Design Design specifications, and the UI experience is excellent, which is comparable to Apple’s but completely different Design and adopts mobile first Design;
  • No matter in the mobile phone, tablet or PC has a perfect fit;
  • Extremely rich and detailed hands-on documentation and free video tutorials, active community, full-time team maintenance, long-term support, weekly edition;
  • Theme customization is supported to provide accessibility (access for the disabled) support. Support tree shaking optimization, can greatly reduce packaging volume.

GitHub (Star: 33.4k) : github.com/vuetifyjs/v…

6. Vux

VUX is a mobile UI component library developed based on WeUI and Vue(2.x), mainly serving wechat pages. Based on Webpack + VUe-loader + VUX, mobile pages can be developed quickly, and vUX-Loader can be used to customize the required style on the basis of WeUI. Vux-loader ensures that components are used on demand, so you don’t have to worry about wrapping up the entire VUX component library code.

VUX is not entirely dependent on WeUI; it extends several common components on top of WeUI, but tries to keep the overall UI style close to WeUI design specifications.

However, the front page of the website also lists the downsides of this component library: the experience is not extreme, maintenance is personal, and careful selection.

GitHub (Star: 18K) : github.com/airyland/vu…

7. View UI

View UI, the original iView, is a set of open source UI component library based on vue.js, mainly serving the PC interface in the background products.

View UI features:

  • Rich components and functions to meet most of the site scenarios;
  • Provide out-of-the-box Admin system and high-level component library, greatly saving development costs;
  • Provide professional and high-quality technical support;
  • Friendly API, free and flexible use of space;
  • A detailed, beautiful UI;
  • Detailed documentation;
  • You can customize themes.

GitHub (Star: 2.5K) : github.com/view-design…

8. Mint UI

Mint-ui contains rich CSS and JS components for everyday mobile development. Through it, you can quickly build a unified style of the page, improve the efficiency of development. It enables true on-demand component loading. You can load only declared components and their style files without worrying about the size of the file.

With the performance threshold in mind on mobile, Mint’S UI uses CSS3 to handle dynamic effects, avoiding unnecessary redrawing and rearranging of the browser, resulting in a smooth, smooth experience for users.

Mint UI is lightweight thanks to vue.js’s efficient componentization scheme. Even with all of them, the compressed file size is only 100KB +.

GitHub (Star: 16.4k) : github.com/ElemeFE/min…

9. Muse-UI

Muse-ui is an open source component library of elegant Material Design UI based on Vue 2.0. It is mainly used for mobile terminal and some desktop applications with low requirements for browser compatibility.

The characteristics of Museui

  • Rich components: Muse UI has more than 40 UI components to adapt to different business environments.
  • Customizable: Muse UI customizes themes in an elegant way, requiring only a small amount of code to replace them.
  • Vue2.0: Muse UI is developed based on Vue2.0, one of the fastest front-end frameworks available today. It is compact, API-friendly and can be used for complex single-page applications

GitHub (Star: 8.3K) : github.com/museui/muse…

10. Buefy

Buefy is based on Bulma and vue.js lightweight UI components, which provide lightweight components out of the box.

Buefy features:

  • Easily retain the current Boolean theme/variable;
  • Support for Material Design icon and FontAwesome;
  • Very lightweight, with no internal dependencies except for the Vue&Bulma;
  • Semantic code output;
  • Follow Boerma Design and some Material Design UX;
  • Focus on usability and performance without excessive animation;

​

GitHub (Star: 9K) : github.com/buefy/buefy

11. Quasar

Quasar consists of dozens of vue.js components built with Vue, providing rich functional options for responsive Web applications and hybrid mobile applications. Components are written as Web components, so they are embedded with HTML, CSS, and Javascript code and can be used by simply tagging an HTML tag in the page and layout template.

Quasar features:

  • State-of-the-art UIs for websites and applications out of the box (follow the Material guide);
  • Out of the box for desktop and mobile browsers (including iOS Safari!) The best support;
  • Tight integration with its own CLI provides best-in-class support for each build mode (SPA, SSR, PWA, mobile applications, desktop applications, and browser extensions) and the best developer experience;
  • Easy to customize (CSS) and extensible (JS);
  • Automatic tree shaking.

GitHub (Star: 20.4k) : github.com/quasarframe…

12. Vuesax

Vuesax is a vue.js based component framework designed from scratch for gradual adoption. Vuesax is dedicated to facilitating application development and improving its design without removing necessary functionality. “We wanted all components to have independent colors, shapes and designs to achieve the freedom of design that our front-end likes, without losing the speed of creation and production.”

GitHub (Star: 5.3K) : github.com/lusaxweb/vu…