![Getting Started with Vue.js Plugins [Production-Ready Example]](https://res.cloudinary.com/practicaldev/image/fetch/s--nxfQeRUJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://snipcart.com/media/203866/vue-js-plugin-1.jpg)
It's no secret that we <3 Vue.js.
So much so that it's a key part of our own product's rewriting.
In the last months, we've learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions & animations, we've experimented with the framework thoroughly.
But there's a missing piece in there:
Something most proponents of the framework will have to work with is Vue.js plugins.
For my own pleasure (and yours, hopefully) I crafted a custom plugin to show you how it's done in a step-by-step tutorial.
I'll also use this post to answer important Vue plugins questions:
- What's a plugin?
- What are they useful for?
- What are the popular Vue.js plugins?
Time for the magic!
A short story of Vue.js plugins
What exactly is a plugin?
Plugins aren't something specific to Vue.js, and you'll usually find them in a large range of software. By definition, they indicate that an interface is provided to allow for extensibility.
In other, simpler words, they're a way to add global features to an app.
In Vue.js, a plugin should expose an install method that takes two parameters:
- The global
Vueobject. - An object incorporating user-defined options.
Good news is they're not that intimidating. Basic knowledge of Vue.js will let you start fiddling with plugins right away.
→ Read the full post & technical tutorial here
Top comments (2)
Hi. I have a question about Vue plug-ins and I was wondering if anyone here can help.
I have a bunch of methods that I use across the whole application, from various components. First of all, is this a good use-case for plug-ins?
I currently have a number of such plug-ins in my project, and sometimes I use the same function name across plug-ins. (As I mentioned, these plug-ins hold common functions that are used throughout the application.)
So for example, I have a find() method in my Customers.js plug-in and a totally different find() method in my Products.js plug-in.
My question is: is there a way to namespace each plug-in such that I can do something like this in the same component:
Thanks.
A reply to my own question here