[Hematemesis Organizing] 40+ Vue3 practical tools shared

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. The following article summarizes 40 Vue3 practical tools, UI libraries, plug-ins, and ecology to share with you. I hope it will be helpful to everyone.

1. Vue3 UI component library

The UI component library can be understood as a collection of reused interface design elements. It is a file library. The UI component library plays the role of behavioral connection in the entire system, is the horizontal collaboration between designers and developers within the team, and is the normative basis to ensure consistent product output. (Learning video sharing: vue video tutorial)

Here are 17 Vue3 UI component libraries, including 13 Web UI libraries and 4 mobile UI libraries. Read the article " 17 Vue3 practical UI component libraries (Web mobile) can be obtained by sharing 》.

Web UI Library

• ElementUI Plus: Component Library for Designers and Developers

• Ant Design of Vue: Ant Design’s Vue implements, develops and serves enterprise-level backend products

• BalmUI: UI component library designed based on Google’s Material Design

• Naive UI: Free open source front-end UI component library based on Vue 3.0/TypeScript

• arco.design: Bytedance enterprise-level product design system, supports React and Vue Dual version

• Quasar: a complete, performance-focused framework

• . . .

Mobile UI Library

• Vant: Mobile Component Library

• NutUI: Jingdong style lightweight mobile Vue component library

• Varlet: Material style mobile component library

• nutui-bingo: Jingdong’s lottery component library based on NutUI

2, Vue3 practical development tool

In the previous article "7 Vue3 practical development tools worth collecting (share)", we introduced 7 practical Vue3 development tools:

• unplugin-vue-components: on-demand components Automatically import plug-in

• vuex-persistedstate: Vuex persistence plug-in

• vuex-persist: Vuex persistence plug-in that supports Typescript

• @vueuse/gesture: Gesture library to make applications interactive

• unplugin-auto-import

• pinia-plugin-persistedstate: Pinia data persistent storage

• vue-termui.dev: A terminal UI framework based on Vue.js

3. Vue3 visualization tool

With the frequent updates of technology, visual development tools have become an effective tool to improve development efficiency. In the previous article "[Summary] 4 Vue3 visualization tools", we introduced 4 Vue3 visualization tools:

• Pdfvuer: for Vue applications A PDF viewer in

• vue3-marquee: Seamless scrolling component

• Vue-ECharts: Baidu ECharts’ Vue.js component

• iconpark: an open source icon library that drives vector icon styles through technology

4, Vue3 common plug-ins

In the previous article "10 Commonly Used Vue3 Plug-ins to Improve Development Efficiency (Come and Collect)", we learned about 10 vue plug-ins that help improve efficiency :

• vue-multiselect-next: Universal select/multiselect/marker component for Vue

• vue-print-nb: Directive wrapper

• vue-i18n-next: International plug-in for Vue3

• vue-cropper: vue image cropping plug-in

• Vue Grid Layout: Vue’s grid layout system

• Vue Qrcode Reader: A set of Vue.js components for detecting and decoding QR (two-dimensional code) codes

• Makeit Captcha: Slider verification code plug-in

• vue3-clipboard: Paste and copy plug-in based on Vue3

• vue.draggable Vue 3 drag-and-drop component based on Sortable.js

• BetterScroll is a plug-in that solves the needs of various scrolling scenarios on the mobile terminal (PC has been supported)

5. Vue3 related ecology

In the previous article "6 practical Vue3 related ecology (summary sharing)》, we learned about 6 Vue3 related ecosystems:

• Vue plug-in library (vue365.cn)

• Pinia: lightweight Level state management library

• Nuxt Modules

• Nuxt 3: Can be used to create server-side rendering (SSR) applications

• vuepress: Vue-driven static website generator

• VueUse: A collection of basic Vue combination utility functions

6, Vue3 animation plug-in

1) vue-starport

Cross-routing shared components with animation

github address: https://github.com/antfu/vue-starport /blob/main/README.zh-Hans.md

Demo address: https://vue-starport.netlify.app/

2) @vueuse/motion

Vue Composables makes your components move

Official address: https://motion.vueuse.org/

github Address: https://github.com/vueuse/motion

7. Audio and video components

@vueuse/sound

Vue combination for playing sound effects

Official address: https://sound.vueuse.org/

github Address: https://github.com/VueUse/sound

[Related video tutorial recommendations: vuejs introductory tutorial, web front-end introduction 】