Cómo importar un script externo con Vue

Les ha pasado que desean agregar una archivo JavaScript externo a su proyecto con Vue y no funciona como debería. La primera vez que yo intente fue agregando la etiqueta de esta forma:

<script src="https://cdn.jsdelivr.net/npm/timer-js@1.0.0/timer.min.js"></script>

Y pues no funciono 😞. ¿Entonces cómo se hace?

Pues empecé a buscar por internet y me encontré con este paquete para Vue:

vue-plugin-load-script

Para instalarlo, solo ejecutamos en nuestra terminal:

# npm
npm install --save vue-plugin-load-script
# yarn
yarn add vue-plugin-load-script

Luego en el archivo main.js agregamos:

import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);

Ahora ya lo tenemos instalado y funcionando 😄, vaya ahora si quisiéramos importar un script de forma global en todo nuestro sitio tendríamos que agregar esto a nuestro main.js.

Vue.loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY").then(() => {
    // Código en caso de que tu script cargue
}).catch(() => {
    // Código en caso de que la carga de tu script fallé
});

¡Que fácil es!, pero Gerardo, ¿Qué pasa si yo quiero agregar un script solo a un componente específico, pues pegamos esta porción de código donde quieras agregar el script al componente, puedes valerte del ciclo de vida (por cierto sino sabes como utilizarlo te dejo un artículo aquí) o agregarlo en un método común y silvestre:

this.$loadScript("https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY").then(() => {
    // Código en caso de que tu script cargue
}).catch(() => {
    // Código en caso de que la carga de tu script fallé
});

Ahora que ya sabes como hacer de esta manera podrás importar librerías JavaScript, scripts de tu autoría e incluso integrar diversas pasarelas de pago o quien sabe hasta JQuery.

Te invito a suscribirte y estar al pendiente de mis próximas publicaciones.