¿Cómo agregar scripts JS externos a los componentes VueJS?
Tengo que usar dos scripts externos para las pasarelas de pago.
Ahora mismo ambos están archivados index.html.
Sin embargo, no quiero cargar estos archivos desde el principio.
La pasarela de pago solo es necesaria cuando el usuario abre un componente específico ( using router-view).
¿Hay alguna forma de lograr esto?
Gracias.
Una forma simple y efectiva de resolver esto es agregando su script externo al vue mounted()de su componente. Te ilustraré con el script Google Recaptcha :
<template>
.... your HTML
</template>
<script>
export default {
data: () => ({
......data of your component
}),
mounted() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
document.head.appendChild(recaptchaScript)
},
methods: {
......methods of your component
}
}
</script>
Fuente: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
Descargué una plantilla HTML que viene con archivos js y jquery personalizados. Tuve que adjuntar esos js a mi aplicación. y continuar con Vue.
Este paquete me funciona perfectamente en este caso https://www.npmjs.com/package/vue-plugin-load-script
// local files
// you have to put your scripts into the public folder.
// that way webpack simply copy these files as it is.
Vue.loadScript("/js/jquery-2.2.4.min.js")
// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")
