Una vez que empiezas a trastear un poco más el framework Nuxt.Js, es posible que te surja la necesidad de añadir librerías JS externas. Estas funcionalidades es posible que no estén adaptadas para ser utilizadas directamente con este framework tan nuevo. Por lo tanto, posiblemente te veas en la necesidad crear un plugin para poder realizar las configuraciones necesarias mediante Javascript.
Introducción
Un plugin en Nuxt.Js sirve para añadir funcionalidad Javascript en la aplicación. Normalmente se suele utilizar para adaptar una librería JS como puede ser Sortable.Js o una librería que está adaptada para ser utilizada en Vue.Js y necesitas cargarla en el compilador de Vue.
Por lo tanto, en esta artículo vamos a hacer un ejemplo real de añadir un plugin en una aplicación Nuxt.Js 2. En este ejemplo en particular se añade un chat para que los visitantes de la página web puedan preguntar o contactar en tiempo real con el dueño de la página web.
La empresa que proporciona esta funcionalidad de chats totalmente integrables en tu página web, se llama Chatra por si alguien quiere probarlo en su propia aplicación.
Si aún no conoces Nuxt.Js deberías de visitar el artículo en el que explicamos que beneficios aporta este framework sobre Vue.js.
Código
Plugin
En primer lugar, vamos a crear el fichero donde se realiza la configuración del plugin. En este caso el fichero se llama chat.js.
El código que se muestra a continuación es proporcionado por los desarrolladores del chat. Es similar al código que proporciona Google Analytics para realizar estadísticas de tu página web. Como hemos dicho anteriormente, para poder insertar esta configuración en Nuxt la forma más correcta es a través de un plugin.
La única modificación añadida en el código es la forma de cargar el id de la cuenta de chat. En este caso se realiza a través de un fichero de configuración .env a través del plugin dotenv.
// plugin/chat.js
export default ({ app }) => {
(function(d, w, c) {
w.ChatraID = process.env.CHAT_ID;
var s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
}Nuxt.config.js
Tradicionalmente, la forma de cargar un archivo JS en el la página web es utilizando un código en una página HTML similar al siguiente:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Sin embargo, mediante Nuxt.Js esto se realiza de otra forma. Si conoces un poco de Nuxt, sabes que no hay un fichero index.html, por lo tanto esta forma de cargar JS ya no se realiza igual, Nuxt ha cambiado las reglas en este sentido.
En este punto entra en juego el fichero de Nuxt más importante, que es el fichero de configuración nuxt.config.js. En este fichero se realizan todas las configuraciones de la aplicación mediante un formato similar a JSON.
En el código que se muestra a continuación se carga el fichero chat.js para que Nuxt.Js lo añada en la configuración de la aplicación. Es bastante simple, se añade en el array de plugins un objeto con la propiedad src que es la que determina la ubicación del fichero chat.js.
// nuxt.config.js
module.exports = {
...
plugins: [
{ src: '~/plugins/chat' },
],
...
}Conclusión
En este ejemplo hemos decidido utilizar un código Javascript que no está pensado para ser utilizado en Vue.Js. Con este echo se quiere demostrar que se puede añadir cualquier funcionalidad JS y utilizarla sin ningún problema en una aplicación que trabajar con Vue.Js y Nuxt.Js.
Por otro lado me gustaría recalcar la sencillez de la configuración que se ha requerido para adaptar esta funcionalidad. Además también es importante destacar lo limpio que queda el código a la hora de importar un fichero JS en Nuxt.Js frente a la forma tradicional en HTML.
Por último, si alguien quiere ver este plugin funcionando en real puede visitar mi página web en donde hago uso de él. Además, si con el ejemplo de código anterior no ha quedado suficientemente claro, en el repositorio de Github está todo el código de la página web y ahí se puede consultar sin problemas el código del plugin.
