Comment ajouter des scripts JS externes aux composants VueJS ?

Question

Je dois utiliser deux scripts externes pour les passerelles de paiement.

Actuellement, les deux sont placés dans le fichier index.html.

Cependant, je ne veux pas charger ces fichiers dès le début.

La passerelle de paiement n'est nécessaire que lorsque l'utilisateur ouvre un composant spécifique (en utilisant router-view).

Y a-t-il un moyen d'atteindre cela?

Merci.

Answer 1

Une façon simple et efficace de résoudre cela est d'ajouter votre script externe dans la méthode mounted() de votre composant vue. Je vais vous illustrer avec le script Google Recaptcha:

  export default {
    data: () => ({
      ......données de votre composant
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......méthodes de votre composant
    }
  }

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

Answer 2

J'ai téléchargé un modèle HTML qui est livré avec des fichiers js personnalisés et jquery. J'ai dû attacher ces js à mon application et continuer avec Vue.

J'ai trouvé ce plugin, c'est une façon propre d'ajouter des scripts externes à la fois via CDN et à partir de fichiers statiques https://www.npmjs.com/package/vue-plugin-load-script

// fichiers locaux
// vous devez mettre vos scripts dans le dossier public.
// de cette façon, webpack copie simplement ces fichiers tels quels.
Vue.loadScript("/js/jquery-2.2.4.min.js")

// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")

Answer 3

En utilisant webpack et vue loader, vous pouvez faire quelque chose comme ceci

il attend que le script externe se charge avant de créer le composant, donc les variables globales, etc. sont disponibles dans le composant

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

Answer 4

Vous pouvez charger le script dont vous avez besoin avec une solution basée sur une promesse:

export default {
  data () {
    return { is_script_loading: false }
  },
  created () {
    // Si un autre composant charge déjà le script
    this.$root.$on('loading_script', e => { this.is_script_loading = true })
  },
  methods: {
    load_script () {
      let self = this
      return new Promise((resolve, reject) => {

        // si le script est déjà en cours de chargement via un autre composant
        if ( self.is_script_loading ){
          // Résoudre lorsque l'autre composant a chargé le 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 = () => {
          /* émettre sur le bus d'événements global pour informer les autres composants
           * que nous chargeons déjà le script */
          this.$root.$emit('script_loaded')
          resolve()
        }

        document.head.appendChild(script)

      })

    },

    async use_script () {
      try {
        await this.load_script()
        // .. faites ce que vous voulez après le chargement du script
      } catch (err) { console.log(err) }

    }
  }
}

Veuillez noter que this.$root est un peu bricolé et vous devriez utiliser une solution vuex ou un eventHub pour les événements globaux à la place.

Vous feriez du code ci-dessus un composant et l'utiliseriez où c'est nécessaire, il ne chargera le script que lorsqu'il est utilisé.

REMARQUE: Ceci est une solution basée sur Vue 2.x. Vue 3 a cessé de prendre en charge $on.

Answer 5

Utilisez-vous l'un des modèles de démarrage pour Webpack pour vue (https://github.com/vuejs-templates/webpack) ? Il est déjà configuré avec vue-loader (https://github.com/vuejs/vue-loader). Si vous n'utilisez pas de modèle de démarrage, vous devez configurer webpack et vue-loader.

Vous pouvez ensuite importer vos scripts dans les composants pertinents (fichier unique). Avant cela, vous devezexporter à partir de vos scripts ce que vous souhaitez importer dans vos composants.

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

~Edit~
Vous pouvez importer à partir de ces wrappers :
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout