Plugins

Plugins exist in a large range of software. Notably, we love our plugins for our IDEs. Much like the socket on the left, the term plugin indicates that an interface is provided to allow for extensibility. VueJS allows for such extensibility, and the official plugins, Vuex and Vue-Router are two of the most commonly used plugins. These two plugins give us access to a centralized store and the ability to react to changes in the browser location.

It’s great that plugins like this exist. However, looking at these can make it seem very difficult to create useful plugins for ourselves. This is false. Not only is it super easy to make plugins, they give you the ability to extend Vue components in a useful way that is easily transferable to other projects. If you create something super sweet, you should consider sharing it with the community.

Scenario 4: John would like to use Lodash throughout his application without repeatedly importing it. He really likes the this.$store format that Vuex uses.

//lodashPlugin.js import _ from 'lodash'; let lodashPlugin = {};

lodashPlugin.install = function (Vue, options) { Vue.prototype.$_ = _; }; //app.js import Vue from 'vue';

import lodashPlugin from 'lodashPlugin.js'; Vue.use(lodashPlugin);

Now, John is free to call Lodash from his components by using this.$_. Note that the dollar sign is a common convention for plugins in Vue. Technically, you don’t need it, but using it should increase readability if another developer reads your code.

See how painless that was. It’s a very simple use of plugins, but that’s okay! Other common uses for this may include the usage of Axios.

Scenario 5: Jay really loved Angular and had some sweet services that he liked using in his projects. Since moving onto Vue, he wanted to still use them.

//ng-app.js

var app = angular.module('myApp', []); app.service('StringService', function() {

this.isPalindrome = function (str) {

return /[^A-Za-z0–9]/g.test(str);

};

this.isLengthEven = function (str) {

return str.split('').length % 2 === 0;

};

});

From this service, let’s copy over the anonymous function and make our plugin.

//stringPlugin.js export default {

install:function(Vue, options){

Vue.prototype.$string = (function(){

return new function(){

this.isPalindrome = function (str) {

return /[^A-Za-z0–9]/g.test(str);

};

this.isLengthEven = function (str) {

return str.split('').length % 2 === 0;

};

}

})();

}

};

While this might seem to be a quick way to copy it over, it’s a bit awkward. It’s better to follow this format:

export default {

install:function(Vue, options){

Vue.prototype.$string = {};

Vue.prototype.$string.isPalindrome = function (str) {

return /[^A-Za-z0–9]/g.test(str);

};

Vue.prototype.$string.isLengthEven = function (str) {

return str.split('').length % 2 === 0;

};

}

};

This is a bit cleaner, and I’m sure that the community has some ideas on even better formats.

Scenario 6: Peyton has some sweet Vue directives that he wants to share with the community. In order to do this, he wants to create a plugin.

//sweetDirectivesPlugin.js export default {

install:function(Vue, options){ Vue.directive('inserted',{

inserted:function(el, binding){

if(binding){

binding.value();

}

}

});

};

};

You might find better examples in the wild.

And of course, take time to look at Vue Router and Vuex.

Wrapping Up

Mixins and plugins have the ability to improve readability and portability of your code. Keeping this in mind, using mixins can actually obscure functionality and make your code less readable. As such, you’ll only want to use them when targeting multiple components. It’s up to you to measure the tradeoffs of using mixins/plugins/imports/repeated code.