vue.js - template - vue keep alive

Cómo agregar scripts JS externos a componentes VueJS

Question

Tengo que usar dos scripts externos para las pasarelas de pago. En este momento, ambos se colocan en el archivo ''index.html''. Sin embargo, no quiero cargar estos archivos al principio. La pasarela de pago solo se necesita cuando el usuario abre un componente específico (usando la vista de enrutador). ¿Hay alguna forma de lograr esto?

Answer 1

¿Está utilizando una de las plantillas de inicio de Webpack para vue ( https://github.com/vuejs-templates/webpack )? Ya viene configurado con vue-loader ( https://github.com/vuejs/vue-loader ). Si no está utilizando una plantilla de inicio, debe configurar webpack y vue-loader.

Luego puede import sus scripts a los componentes relevantes (archivo único). Antes de eso, debe export desde sus scripts lo que desea import a sus componentes.

Importación ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html

~ Editar ~
Puede importar desde estos contenedores:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout

Answer 2

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 de archivos estáticos 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")

Answer 3

La respuesta principal de crear etiqueta en montado es buena, pero tiene algunos problemas:

Se repetirá crear etiqueta una y otra vez, si cambia su enlace varias veces.

Así que creé un script para resolver esto, y puede eliminar la etiqueta si lo desea.

Es muy simple, pero puede ahorrarle tiempo para crearlo usted mismo.

// PROJECT/src/assets/external.js

function head_script(src) {
    if(document.querySelector("script[src=''" + src + "'']")){ return; }
    let script = document.createElement(''script'');
    script.setAttribute(''src'', src);
    script.setAttribute(''type'', ''text/javascript'');
    document.head.appendChild(script)
}

function body_script(src) {
    if(document.querySelector("script[src=''" + src + "'']")){ return; }
    let script = document.createElement(''script'');
    script.setAttribute(''src'', src);
    script.setAttribute(''type'', ''text/javascript'');
    document.body.appendChild(script)
}

function del_script(src) {
    let el = document.querySelector("script[src=''" + src + "'']");
    if(el){ el.remove(); }
}


function head_link(href) {
    if(document.querySelector("link[href=''" + href + "'']")){ return; }
    let link = document.createElement(''link'');
    link.setAttribute(''href'', href);
    link.setAttribute(''rel'', "stylesheet");
    link.setAttribute(''type'', "text/css");
    document.head.appendChild(link)
}

function body_link(href) {
    if(document.querySelector("link[href=''" + href + "'']")){ return; }
    let link = document.createElement(''link'');
    link.setAttribute(''href'', href);
    link.setAttribute(''rel'', "stylesheet");
    link.setAttribute(''type'', "text/css");
    document.body.appendChild(link)
}

function del_link(href) {
    let el = document.querySelector("link[href=''" + href + "'']");
    if(el){ el.remove(); }
}

export {
    head_script,
    body_script,
    del_script,
    head_link,
    body_link,
    del_link,
}

Y puedes usarlo así:

// PROJECT/src/views/xxxxxxxxx.vue

......

<script>
    import * as external from ''@/assets/external.js''
    export default {
        name: "xxxxxxxxx",
        mounted(){
            external.head_script(''/assets/script1.js'');
            external.body_script(''/assets/script2.js'');
            external.head_link(''/assets/style1.css'');
            external.body_link(''/assets/style2.css'');
        },
        destroyed(){
            external.del_script(''/assets/script1.js'');
            external.del_script(''/assets/script2.js'');
            external.del_link(''/assets/style1.css'');
            external.del_link(''/assets/style2.css'');
        },
    }
</script>

......

Answer 4

Puede cargar el script que necesita con una solución basada en promesas:

export default {
  data () {
    return { is_script_loading: false }
  },
  created () {
    // If another component is already loading the script
    this.$root.$on(''loading_script'', e => { this.is_script_loading = true })
  },
  methods: {
    load_script () {
      let self = this
      return new Promise((resolve, reject) => {

        // if script is already loading via another component
        if ( self.is_script_loading ){
          // Resolve when the other component has loaded the script
          this.$root.$on(''script_loaded'', resolve)
          return
        }

        let script = document.createElement(''script'')
        script.setAttribute(''src'', ''https://www.google.com/recaptcha/api.js'')
        script.async = true

        this.$root.$emit(''loading_script'')

        script.onload = () => {
          /* emit to global event bus to inform other components
           * we are already loading the script */
          this.$root.$emit(''script_loaded'')
          resolve()
        }

        document.head.appendChild(script)

      })

    },

    async use_script () {
      try {
        await this.load_script()
        // .. do what you want after script has loaded
      } catch (err) { console.log(err) }

    }
  }
}

Tenga en cuenta que this.$root es un poco hacky y debe utilizar una solución vuex o eventHub para los eventos globales en su lugar.

Haría lo anterior en un componente y lo usaría donde sea necesario, solo cargará el script cuando se use.

Answer 5

Puede usar vue-loader y codificar sus componentes en sus propios archivos (componentes de un solo archivo). Esto le permitirá incluir scripts y css por componentes.

Answer 6

Puede usar el paquete vue-head para agregar scripts y otras etiquetas al encabezado de su componente vue.

Es tan simple como:

var myComponent = Vue.extend({
  data: function () {
    return {
      ...
    }
  },
  head: {
    title: {
      inner: ''It will be a pleasure''
    },
    // Meta tags
    meta: [
      { name: ''application-name'', content: ''Name of my application'' },
      { name: ''description'', content: ''A description of the page'', id: ''desc'' }, // id to replace intead of create element
      // ...
      // Twitter
      { name: ''twitter:title'', content: ''Content Title'' },
      // with shorthand
      { n: ''twitter:description'', c: ''Content description less than 200 characters''},
      // ...
      // Google+ / Schema.org
      { itemprop: ''name'', content: ''Content Title'' },
      { itemprop: ''description'', content: ''Content Title'' },
      // ...
      // Facebook / Open Graph
      { property: ''fb:app_id'', content: ''123456789'' },
      { property: ''og:title'', content: ''Content Title'' },
      // with shorthand
      { p: ''og:image'', c: ''https://example.com/image.jpg'' },
      // ...
    ],
    // link tags
    link: [
      { rel: ''canonical'', href: ''http://example.com/#!/contact/'', id: ''canonical'' },
      { rel: ''author'', href: ''author'', undo: false }, // undo property - not to remove the element
      { rel: ''icon'', href: require(''./path/to/icon-16.png''), sizes: ''16x16'', type: ''image/png'' }, 
      // with shorthand
      { r: ''icon'', h: ''path/to/icon-32.png'', sz: ''32x32'', t: ''image/png'' },
      // ...
    ],
    script: [
      { type: ''text/javascript'', src: ''cdn/to/script.js'', async: true, body: true}, // Insert in body
      // with shorthand
      { t: ''application/ld+json'', i: ''{ "@context": "http://schema.org" }'' },
      // ...
    ],
    style: [
      { type: ''text/css'', inner: ''body { background-color: #000; color: #fff}'', undo: false },
      // ...
    ]
  }
})

Mira este link para más ejemplos.

Answer 7

Una manera simple y efectiva de resolver esto es mediante la adición de su script externo al vue mounted() de su componente. Te ilustraré con el script de 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

Answer 8

usando webpack y vue loader puedes hacer algo como esto

espera a que se cargue el script externo antes de crear el componente, por lo que los vars de globar, 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)
  })
 }
},