Looking for the best Vue Plugins for your next project? Then here is the list of the best 15+ Vue Plugins for developers in 2021.
If you’ve been regularly building apps with Vue, you’ve noticed that in every app, you repeat some common functionalities over and over. For instance, you use a Log Component in every Vue app you work on. In addition, you might expose a few global functions or properties that you always find useful and usable in your apps. If this is you, then most probably you can start packing your common code into a Vue plug-in.
A Vue plug-in is a self-contained code that adds global-level functionality to your app. When you create it, you package it as an NPM package. Then, whenever you need this plug-in, you install it into your app to avoid the repetition of components, directives, global functions, and the like.
Plugins are self-contained code that usually adds global-level functionality to Vue. It is either an
object that exposes an
install() method, or a
There is no strictly defined scope for a plugin, but common scenarios where plugins are useful include:
- Add some global methods or properties.
- one or more global assets: directives/filters/transitions etc.
- Add some component options by the global mixin.
- some global instance methods by attaching them to
- A library that provides an API of its own, while at the same time injecting some combination of the above.
Here are some of the awesome tools and collections for Vuejs developers: 5+ Useful tools for Testing VueJS Application, VueJS UI component library and frameworks, Vue JS Projects, Vuejs Admin Template Free Download.
You can also check the Vuejs admin templates for your upcoming project. No, let’s check the Vue plugins.
A Vue.js plugin for lazyloading your Image or Component in your application.
Vue module for lazyloading images in your applications. Some of the goals of this project worth noting include:
- Be lightweight, powerful, and easy to use
- Work on any image type
- Add loading class while the image is loading
- Supports both Vue 1.0 and Vue 2.0
Official ESLint plugin for Vue.js
This plugin allows us to check the
.vue files with ESLint, as well as Vue code in
- Finds syntax errors.
- Also finds the wrong use of Vue.js Directives.
- Finds the violation for Vue.js Style Guide.
ESLint editor integrations are useful to check your code in real-time.
A Vue Plugin to render your component’s template anywhere in the DOM (Works on the virtual dom level, doesn’t move nodes within the DOM)
PortalVue is a set of two components that allow you to render a component’s template (or a part of it) anywhere in the document — even outside the part controlled by your Vue App!
Vue.js 2+ notification plugin using
Velocity for animations.
Vue Notifications comes with default styling, but it’s easy to replace with your own.
Materio – Vuetify Vuejs Admin Template (Premium)(The Best⚡)
Materio Vuetify Vuejs Admin Dashboard Template – is the latest most developer-friendly 🤘🏻 & highly customizable✨ Admin Dashboard Template based on Vuetify. If you’re a developer looking for a Vuejs Admin Template that is enriched with features, and highly customizable look no further than the Materio Vuetify Vuejs admin template🤩. Besides, the highest industry standards are considered to bring you one of the best Vuetify admin templates that are not just fast 🚀 and easy to use, but highly scalable. Offering ultimate convenience and flexibility, you’ll be able to build whatever application you want with very little hassle.
Materio also offers invaluable features that aim to help you create premium quality single-page apps exactly as you imagine them🤘🏻. Furthermore, it comes with unique and useful tools such as fuzzy search, Dark, Semi-Dark & Bordered layout options, Advanced cards, and Charts. In addition, it offers amazing features as following.
- Pure Vue js, No Jquery Dependency
- Created with Vue CLI
- Utilizes Vuex, Vue Router, Webpack
- Code Splitting, Lazy loading
- JWT Authentication
- Access Control (ACL)
- i18n Page
- Multi-lingual Support
- 2 chart libraries
- 3 Dashboard
- SASS Powered and many more.
Responsive Touch Compatible Toast plugin for VueJS.
Vue Toasted is one of the best toast plugins available for VueJS. It’s used by VueJS, Laravel, NuxtJS and trusted by many more organizations. It’s responsive, touch compatible, easy to use, attractive, and feature-rich with icons, actions, and more.
An easy to use, VueJS (2.x) table plugin with sorting, column filtering, pagination, etc.
An easy-to-use powerful data table for VueJS with advanced customizations including sorting, column filtering, pagination, grouping, etc.
- Leverage checkbox table
- Grouped rows
- Remote workflow for your table
Vue Tour is a lightweight, simple, and customizable guided tour plugin for use with Vue.js. It provides a quick and easy way to guide your users through your application. You can change the DOM of every step independently, use your own classes, and even add custom animations.
- UI step functions
- Disable scroll between steps
Cookie info plugin for Vue.js 2.x
You can easily create your own themes. The classes that need to be styled are:
.Cookiefor the container
.Cookie__contentcontent with the message
.Cookie__buttonfor the button
A lightweight plugin for fuzzy search library, Fuse.js
A Vue.js plugin for fuzzy search library, Fuse.js. This plugin wraps Fuse.js in a convenient component with most of the boilerplate and props already set up. It’s designed to enable you to drop a client-side fuzzy search into your app without much work.
The 3.x version of
vue-fuse is compatible with both Vue 2.x and Vue 3.x
A customizable component for adding D3 charts that bind to your components’ data.
V Chart Plugin is built using Vue.js’ component architecture. This will allow the chart to be a first-class citizen of your Vue.js application. Combining multiple charts allows you to create complex dashboards and enable deeper insights into your data. All aspects of the charts can be configured to allow for full customization of your graphs along with the ability to style the SVG elements using the classes and IDs generated for each individual canvas element.
Chart types currently supported:
An easy-to-use component to show a beautiful responsive pipeline like Jenkins blue ocean plugin.
- Created Graph according to your data dynamically
- Responsive web design
- SVG component
- Fully configurable
- Via data attributes
- Show/Hide arrow
- 3 kinds of lines
Very simple lightbox plugin without any dependencies only Vue!
A toast plugin for Vue2.
Vue.js accessibility eslint-plugin managed by Vue-a11y.
lightweight Google Maps plugin for Vue 2.x.
- Polylines / Polygons
- Rectangles / Circles
- Data / GeoJSON
Easy to use, no need to set the size, support rotation, photo swipe-based Vue swipe plugin. a Vue plugin for PhotoSwipe without set image size.
Simple Vue.js plugin for page scroll progress bar.
A Text Swimlane plugin for Vue.js to display a list of words as an animated text Swimlane.
A simple and cool splash plugin for vue.js
A plugin to turn tables into sorted tables. Supports nested object keys, custom icons, and reusable components.
A Vue.js plugin to detect idle/non-active users.
A free and lightweight WordPress eCommerce plugin for developers and other digital shops.
Mouseover gallery plugin for Vue.js. Supports image and video.
VueRollr is a lightweight plugin that allows you to add a mouseover gallery to your Vue.js project. Supported media now includes images and video.
Vue 3 Plugins
Vue.js toast notification plugin for Vue 3.
A plugin, component or directive to simply use SVG sprite (vue 3.x, vue 2.x).
This Vue.js plugin will help you to manage the SVG sprite sheet with
<symbol> elements. It provides a component/directive to make tu use of
<use> elements easier.
This module is tree-shakable and exports the following:
SvgSprite, the component version (with a S)
svgSpritePlugin, options and global registration for component
svgSpriteDirective, the directive version
svgSpriteDirectivePlugin, options and global registration for the directive
🛠 A Vue 3 plugin for monitoring Vuex store (time-travel is also supported)
Vuex state monitoring tool (for Vue 3) — temporary alternative instead of Vue-dev tools (vuex functionality). If you want new features — add request in issues or create new pull-request
Vuex Overlay Tool plugin for Vue 3 provides monitoring of the state in the store with features from
- Overlay panel with Vuex store from your app
- Mutations history
- State & getters overview
- Time travel for mutations
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official dev tools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.
Vuex helps us deal with shared state management with the cost of more concepts and boilerplates. It’s a trade-off between short-term and long-term productivity.
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze.
- Expressive route syntax
- Fine-grained Navigation control
- Component-based configuration
- History modes
- Scroll control
- Automatic Encoding
So, here were the best Vue Plugins that can be helpful for your next project.
Well, this is not a complete list as there are many others available on the internet. Although, searching here and there can be time-consuming. Thus, we have gathered here some of the best and regularly updated VueJS Plugins. So that you don’t have to waste your time here and there looking for the right one.
Do tell us which one is you are already using and also suggest if you have any plugin that can be listed here.
We hope you find this collection helpful.