- 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.
What is a Vue Plugin?
Enables you to add global-level functionality to Vue.
It's a good way to keep your Vue components clear and small. You can also package and share your code with other developers.
Specifically, plugin is nothing more than an object which expose an install
method.
Writing and using a plugin
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
// plugin.js
// This exports the plugin object.
export default {
// The install method will be called with the Vue constructor as
// the first argument, along with possible options
install (Vue, options) {
}
}
But a question which arises is where do I provide these options
?
OK. 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.
main.js
// main.js
import Vue from 'vue'
import yourPlugin from './plugin.js'
// Without options
Vue.use(yourPlugin)
// With options
Vue.use(yourPlugin, {
someOption: true
})
new Vue({
el: '#app',
render: h => h(App)
})
Install method - Plugins
The 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. 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.
// plugin.js
import Component from '/src/components/Component.vue'
// This exports the plugin object.
export default {
// The install method will be called with the Vue constructor as
// the first argument, along with possible options
install (Vue, options) {
// Add or modify global methods or properties.
Vue.yourMethod = (value) => value
// Add a component or directive to your plugin, so it will be installed globally to your project.
Vue.component('component', Component)
// Add `Vue.mixin()` to inject options to all components.
Vue.mixin({
// Add component lifecycle hooks or properties.
created() {
console.log('Hello from created hook!')
}
})
// Add Vue instance methods by attaching them to Vue.prototype.
Vue.prototype.$myProperty = 'This is a Vue instance property.'
}
}
Now, let's take a deep dive into our example's code
-------- EXAMPLE ---
Distributing
So you have built your first plugin in Vue. It's time to distribute it to the community - if you want.
Until next time...Happy coding!
Top comments (7)
Vue.property.$myProperty
there is an error there, should beVue.prototype.$myProperty
Although I 100% like and use this method - it does throw an ESLint error:
error: Assignment to property of function parameter 'Vue' (no-param-reassign) at src/plugins/plugin.js:5:5:
Thanks, realy great guide!
This is a great simple guide, pairing it with unit tests would be even better almost perfect.
Thank you for your explanation. It helped me a lot!
how can I publish it in npm???
Great article, I would also recommend checking out this article about the same
inkoop.io/blog/building-custom-plu...