Как добавить внешние скрипты JS к компонентам VueJS

Простой и эффективный способ решения этого вопроса заключается в добавлении внешнего скрипта в vue created()вашего компонента. Я проиллюстрирую вас сценарием 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>

Источник: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8

Используете ли вы один из шаблонов стартера Webpack для vue ( https://github.com/vuejs-templates/webpack )? Он уже настроен с помощью vue-loader ( https://github.com/vuejs/vue-loader ). Если вы не используете шаблон стартера, вам нужно настроить webpack и vue-loader.

Вы можете использовать importсвои сценарии для соответствующих (отдельных файлов) компонентов. До этого вы должны exportот своих сценариев, что хотите, importк своим компонентам.

Импорт ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html

~ Редактировать ~
Вы можете импортировать из этих оберток:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout

используя webpack и vue загрузчик, вы можете сделать что-то вроде этого

он ожидает, что внешний скрипт загрузится до создания компонента, поэтому в компоненте доступны глобальные вары и т. д.

components: {
 SomeComponent: () => {
  return new Promise((resolve, reject) => {
   let script = document.createElement(a€?scripta€™)
   script.onload = () => {
    resolve(import(someComponenta€™))
   }
   script.async = true
   script.src = a€?https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=placesa€™
   document.head.appendChild(script)
  })
 }
},

Вы можете использовать vue-loader и кодировать свои компоненты в своих файлах (отдельные файловые компоненты). Это позволит вам включать скрипты и css на основе компонентов.

Вы можете загрузить сценарий, который вам нужен, с помощью решения на основе обещаний:

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) }

    }
  }
}

Обратите внимание, что this.$rootэто немного взломано, и вместо этого вы должны использовать решение vuex или eventHub для глобальных событий.

Вы сделали бы это выше в компонент и использовали бы там, где это необходимо, он будет загружать только скрипт при его использовании.