Cómo añadir scripts JS externos a los componentes de VueJS

Usando webpack y vue loader puedes hacer algo como esto

Espera a que el script externo se cargue 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)
  })
 }
},

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 (de un solo archivo). Antes de eso, tienes que export de tus scripts lo que quieres import a tus componentes.

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

~ Editar~
Puedes importar desde estas envolturas:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout

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

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 pirateado y debe usar 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.