Vue.js 2 #14 : Crear un plugin

En esta entrada vamos a crear un plugin para Vue.js basado en una librería JS que nos permite crear notificaciones llamada Notyf.

Un plugin nos permite añadir funcionalidades globales a Vue.js. Anteriormente, ya hemos visto como utilizarlos y como añadirlos a nuestros proyectos y en esta entrada vamos a ver como crearlos.

Lo que voy a hacer, va a ser crear un plugin a partir de una librería JS llamada Notyf que, como he dicho antes, nos permite crear notificaciones fácilmente. Antes de hacer la entrada, he estado buscando que tipo de plugin de ejemplo podía hacer y lo que más me ha convencido es hacer un plugin basado en alguna librería JS ya creada. En GitHub, podemos encontrar muchísimos plugins para Vue.js ya hechos, con lo cual, podemos ver y aprender como están hechos y hacer el nuestro propio basándonos éstos. Como digo, he encontrado esta librería que no tenía ninguno ya hecho y he creído que podía ser una buena opción.

He de decir que será un plugin súper simple, ya que es simplemente un ejemplo. Todo se puede complicar todo lo que queramos.

Empezamos creando una directorio y dentro de ese directorio creamos un archivo package.json con este código:

{

"name": "vue-notyf",

"version": "1.0.0",

"description": "Vue.js plugin notyf",

"author": "Vreaxe <vreaxe@gmail.com>",

"main": "index.js",

"scripts": {},

"repository": {},

"dependencies": {

"notyf": "^2.0.1",

"vue": "^2.4.2"

"devDependencies": {}

}

Como ves, estamos indicándole la versión, el nombre del paquete, el autor, las dependencias, etc.

Ahora vamos a crear un archivo index.js , que como pone en el package.json será el archivo principal:

(function () {

// https://github.com/caroso1222/notyf

if (typeof require === "function") {

// npm module

Notyf = require("notyf");

}

var notyf = new Notyf();

var VueNotyf = {

install: function(Vue) {

// add to the Vue instance

Vue.prototype.$notyf = this;

alert: function(text) {

return notyf.alert(text);

confirm: function(text) {

return notyf.confirm(text);

}

};

if (typeof exports == "object") {

module.exports = VueNotyf;

} else if (typeof define == "function" && define.amd) {

define([], function(){ return VueNotyf });

} else if (window.Vue) {

Vue.use(VueNotyf);

}

})();

Lo se hace en este archivo es crear una instancia de Notyf de la forma que dice en su documentación. Después se crea un objeto llamado VueNotyf con tres métodos. El método install es un método de Vue.js que debe contener los mixins, componentes, métodos, etc. que tendrá el plugin. En este caso, en el método install, simplemente se añade a la instancia de Vue.js un método llamado $notyf que contendrá this (que corresponde al objeto VueNotyf). Al añadir $notyf a la instancia de Vue, podremos acceder a través de éste a los otros métodos del objeto (alert y confirm) de esta manera: this.$notyf.confirm() y this.$notyf.alert(). Los métodos alert y confirm lo que hacen es llamar a los métodos con el mismo nombre de Notyf y tienen como parámetro el texto que se mostrará.

Explicado queda muy enrevesado, pero el código es sencillo y fácil de entender.

Y con esto ya tendremos nuestro plugin. Ahora tenemos que instalarlo, como yo estoy en un entorno de pruebas y no lo he subido a NPM, he tenido que crear un nuevo proyecto con vue-cli y hacer lo que dice esta guía para ver si funcionaba.

Una vez intalado, para probarlo, se hace como cualquier otro plugin: