Vue Plugin Install

Posted on  by admin

What is a Vue Plugin? Writing and using a plugin. In this post, i will be showing you how you can write a basic plugin in Vue.You should have a prior experience with Vue and JavaScript.

Enables you to add global-level functionality to Vue.It's a good way to keep your Vue components clear and small.

Vue Devtools

You can also package and share your code with other developers. Specifically, plugin is nothing more than an object which expose an install method.

Firstly, you should export the plugin object, so it can be used anywhere in your project. Then expose the install method which takes two parameters: Vue constructor and options object. The second parameter - options - is optional and customize your plugin.plugin.js.

But a question which arises is where do I provide these options? You can call use() method and pass yourPlugin and your options as arguments, since you have already imported your plugin.js into main.js file.

Install method - PluginsThe install method contains one or more of the following: .

Add some global methods or properties. Add one or more global assets: directives/filters/transitions etc.

Add some component options by global mixin. Mixins are a flexible way to distribute reusable functionalities for Vue components.

plugin.js

main.js

A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. Add some Vue instance methods by attaching them to Vue.prototype. -------- EXAMPLE ---.

So you have built your first plugin in Vue. It's time to distribute it to the community - if you want. Upload the source files to Github and then . Publish the package to NPM. Until next time..Happy coding! DigitalOcean joining forces with CSS-Tricks!

Special welcome offer: get $100 of free credit. In the last months, I’ve learned a lot about Vue.

From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I’ve experimented with the framework thoroughly.

But there’s been a missing piece throughout my learning: plugins.

Most folks working with Vue have either comes to rely on plugins as part of their workflow or will certainly cross paths with plugins somewhere down the road.

plugin.js

main.js

Whatever the case, they’re a great way to leverage existing code without having to constantly write from scratch. Many of you have likely used jQuery and are accustomed to using (or making!) plugins to create anything from carousels and modals to responsive videos and type.

#Usage with PWA

We’re basically talking about the same thing here with Vue plugins. So, you want to make one? I’m going to assume you’re nodding your head so we can get our hands dirty together with a step-by-step guide for writing a custom Vue plugin.

Plugins aren’t something specific to Vue and — just like jQuery — you’ll find that there’s a wide variety of plugins that do many different things.

By definition, they indicate that an interface is provided to allow for extensibility.

plugin.js

App.vue

Brass tacks: they’re a way to plug global features into an app and extend them for your use.

The Vue documentation covers plugins in great detail and provides an excellent list of broad categories that plugins generally fall into:.

Add some global methods or properties. Add one or more global assets: directives/filters/transitions etc.

Add some component options by global mixin. Add some Vue instance methods by attaching them to Vue.prototype.

A library that provides an API of its own, while at the same time injecting some combination of the above.

Bower

Enough prelude. Let’s write some code! At Spektrum, Snipcart’s mother agency, our designs go through an approval process, as I’m sure is typical at most other shops and companies.

We allow a client to comment and make suggestions on designs as they review them so that, ultimately, we get the green light to proceed and build the thing. We generally use InVision for all this.

The commenting system is a core component in InVision.

plugin.js

It lets people click on any portion of the design and leave a comment for collaborators directly where that feedback makes sense.

It’s pretty rad. As cool as InVision is, I think we can do the same thing ourselves with a little Vue magic and come out with a plugin that anyone can use as well.

The good news here is they’re not that intimidating. A basic knowledge of Vue is all you need to start fiddling with plugins right away.

Using a Plugin

A Vue plugin should contain an install method that takes two parameters:. The global Vue object.

An object incorporating user-defined options. Firing up a Vue project is super simple, thanks to Vue CLI 3.

Once you have that installed, run the following in your command line:.

plugin.js

This gives us the classic “Hello World” start we need to crank out a test app that will put our plugin to use. Our plugin has to live somewhere in the project, so let’s create a directory where we can cram all our work, then navigate our command line to the new directory:.

A Vue plugin is basically an object with an install function that gets executed whenever the application using it includes it with Vue.use().

The install function receives the global Vue object as a parameter and an options object:.

Final Thoughts

Now, let’s plug this in our “Hello World” test app:. We want the plugin to be configurable. This will allow anyone using it in their own app to tweak things up.

It also makes our plugin more versatile. We’ll make options the second argument of the install function. Let’s create the default options that will represent the base behavior of the plugin, i.e.

how it operates when no custom option is specified:. Then, we can merge the options that get passed into the install function on top of these defaults:.

#Usage with Capacitor

  • Create a Class Vue Compnent with vue-class-component

    We can create a Vue component in a class-style component with the vue-class-component package. To…

  • Create a Vue.js Stopwatch

    We can create a stopwatch using Vue.js by using built in functions. In this article,…

  • Create a Hello World App with Vuejs

    There're a few ways to create a hello world app with Vuejs. With the Vue…