Cómo agregar scripts JS externos a los componentes de VueJS

Si te encuentras con alguna parte que no entiendes puedes comentarlo y haremos todo lo necesario de ayudarte lo mas rápido que podamos.

Solución:

Una forma simple y efectiva de resolver esto es agregando su script externo al vue mounted() de su componente. Te ilustraré con el script de Google Recaptcha:

Fuente: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

He descargado una plantilla HTML que viene con archivos js personalizados y jquery. Tuve que adjuntar esos js a mi aplicación. y continuar con Vue.

Encontré este complemento, es una forma limpia de agregar scripts externos tanto a través de CDN como desde static archivos 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")

usando webpack y vue loader puedes hacer algo como esto

espera a que se cargue la secuencia de comandos externa antes de crear el componente, por lo que globar vars, etc. están disponibles en el componente

components: 
 SomeComponent: () => 
  return new Promise((resolve, reject) => 
   let script = document.createElement('script')
   script.onload = () => 
    resolve(import(someComponent))
   
   script.async = true
   script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
   document.head.appendChild(script)
  )
 
,

Si sostienes algún reparo y capacidad de refinar nuestro ensayo eres capaz de añadir una interpretación y con gusto lo ojearemos.

---

---

Utiliza Nuestro Buscador