17 Most Popular Vue Plugins for 2021

Author: John Lim
Translator: Front-end Xiaozhi
Source: vuemastery

If you have dreams and dry goods, you can search for [Great Relocation to the World] on WeChat and pay attention to this Shuwanzhi who is still washing dishes in the early hours of the morning.
This article https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.

Vue is enhanced by a healthy ecosystem of plugins and packages, making development reliable, fast and easy. Since Vue is the framework of choice for an international developer community, there is a growing library of plugins and packages that you can use in your projects. This article lists 15 popular Vue plugins for Vue 2 and Vue 3.

• Vuetify
• NuxtJS
• Vuex
• Vuex Persisted State
• VuePress
• Vue Meta
• Vue ChartJS
• Vue Grid Layout
• Vue Draggable
• Vee-Validate
• Vue Toastification
• Vue Tour
• Swiper.js
• Vue2-Leaflet
• TroisJS
• Vue Scrollama
• Vue QR Code Reader

Vuetify

Tutorial: https://www.vuemastery.com/courses/beautify-with-vuetify/getting-started-with-vuetify

Have you ever struggled with how to make your app visually appealing? Vuetify is a UI library based on Material Design that supports both Google and Android design languages.

It's an open source library with hundreds of components ranging from buttons, app bars, chips, modals and more. These components are pre-designed and very functional, allowing you to interact with them through documented props and slots. Pre-defined CSS classes are also available to control colors, fonts, grid spacing, flexboxes, and more.

NuxtJS

Nuxt is based on a strong modular architecture. You can choose from over 50 modules to make your development faster and easier. Support for PWAs, adding Google Analytics to your pages, or generating sitemaps, all without reinventing the wheel.

NuxtJS is currently based on Vue 2. But nux3 has been released recently and has been completely rewritten to support Vue 3.

Vuex

Vuex is a state management pattern developed for Vue.js applications. It uses a centralized store to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner. Vuex is also integrated into Vue's official debugging tool devtools extension (opens new window), providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

Vuex Persisted State

The Vuex state mechanism is reset as soon as it is refreshed. The way to solve the problem is generally to store it (session/local Storage). The vuex-persistedstate plugin helps us integrate these functions.

VuePress

VuePress is a Vue-driven static website generator developed by Evan You, the author of Vue, for the convenience of document writing.

• The default theme is consistent with the official Vue documentation
• Simple, less configuration, high performance
• Markdown provides extensions for technical documentation
• Comes with PWA
• Custom themes, the degree of customization is entirely up to you

Vue Meta

Address: https://vue-meta.nuxtjs.org/

The vue-meta plugin based on Vue 2.0 is mainly used to manage HMTL header tags, and also supports SSR.

vue-meta has the following features:

• Set metaInfo in the component, you can easily manage the header tags
• The data of metaInfo is responsive, if the data changes, the header information will be automatically updated
  Support SSR

Vue ChartJS

Address: https://www.npmjs.com/package/vue-chartjs

Want to add charts to your Vue app? Take a look at Chart.js . It is a simple and flexible JS charting library for designers and developers. It has many beautiful chart types to choose from.

Address: https://jbaysolutions.github.io/vue-grid-layout/

Vue Grid Layout is a grid layout system similar to Gridster for Vue.js, inspired by React Grid Layout.

characteristic

• draggable
• resizable
• Static widgets (not draggable, resizable)
• Bounds checking when dragging and resizing
• Avoid rebuilding the grid when adding or removing parts
• Serializable and restoreable layouts
• Automated RTL support
• Responsive

Vue Draggable

Address: https://www.npmjs.com/package/vuedraggable

Vue.Draggable is a Sortable.js drag and drop plugin based on 061e8ad12279ee. It supports mobile devices, dragging and selecting text, intelligent scrolling, dragging and dropping between different lists, independent of jQuery, compatible with vue2 transition animation, and support for undo operations. In short, it is a very good vue drag and drop component.

Vee-Validate

Address: https://www.npmjs.com/package/vee-validate

In order to ensure that the correct type of data is collected from the user through the form, it is necessary to validate the form to ensure that the user input conforms to the expected schema. VeeValidate is a package that can add this layer of functionality to any form component.

Vue Toastification

Address: https://vue-toastification.maronato.dev/

Vue Toastification is a lightweight, easy-to-use and beautiful tooltip notification component that provides a large number of options to support most custom options.

Vue Tour

Address: https://github.com/pulsardev/vue-tour

Vue Tour is a lightweight, simple and customizable how-to plugin for use with Vue.js. It provides a quick and easy way to guide users through your application.

Swiper.js

Address: https://swiperjs.com/vue

Swiper.js is a pre-made carousel component that can be used to swipe between various images. Swiper.js natively supports Vue 3, providing a component that can be plugged into your project. For Vue 2 you can use other packages like vue-awesome-swiper .

vue2-leaflet

Address: https://www.npmjs.com/package/vue2-leaflet

vue2-leaflet is the encapsulation of ledflet, and vue2-leaflet can be used directly in the vue project. Leaflet.js is an open source library with which it is possible to deploy interactive, simple, lightweight and simple web maps.

TroisJS

Address: https://troisjs.github.io/

Trois (Three in French) is a Vue 3 library for Three.JS , a popular WebGL library.

Three.JS has good support for both desktop and mobile. This library allows you to easily create 3D content for your website using VueJS components. You can use this library to add a 3D renderer to your website and specify scene details like materials, lighting, meshes, shadows, etc. using pre-built components in <template>

Trois.Js is a wrapper on top of Three.js, so no slower than the original library. It also simplifies the handling of objects by automatically disposing of geometry, materials, textures, renderers, etc., which is not present in the original library.

vue-scrollama

Address: https://www.npmjs.com/package/vue-scrollama

A Vue component to easily set up scroll-driven interactions (aka scrolling presentations). Use Scrollama under the hood.

Vue QR Code Reader

Address: https://gruhn.github.io/vue-qrcode-reader/demos/CustomTracking.html

QR codes (QR codes) are very common in today's world. Vue QR Code Reader is a plug-and-play package that allows you to add QR code scanning functionality to your application.

---

code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. By the way, I recommend a useful bug monitoring tool Fundebug .

https://www.vuemastery.com/blog/most-popular-vuejs-ugins-and-packages

If you have dreams and dry goods, search [Big Move to the World] still washing dishes in the early morning.

This article https://github.com/qq449245884/xiaozhi , and there are complete test sites, materials and my series of articles for interviews with first-tier manufacturers.