Getting Started with Vue.js Plugins [Production-Ready Example]

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:

1. The global Vue object.
2. 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

Comments

[Les Carbonaro]

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:

Vue.Customers.find();
Vue.Products.find();

Thanks.

[Les Carbonaro]

A reply to my own question here