Loading an external script before loading components - Vue.js

Question

In my Vue project, I would like to load a script from a server (e. g. https://myurl.com/API.js). The script contains a variable, which I would like to use in my Vue component (view). The problem is that when I load that scrip using the loadScript module:

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);
Vue.loadScript('https://quvia.cz:4443/portalAPI.js')

It is then loaded after the Vue component, so when try to console.log(externalScriptVariable), it is undefined. If I would setTimeout for 1 second, it would output the variable just fine.

What can I do in Vue.js to "await" the script loading, so it would load before every other Vue component?

Wayne · Accepted Answer · 2020-04-02 11:31:48Z

2

You can use async/await

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

(async function() {
  await Vue.loadScript('https://quvia.cz:4443/portalAPI.js');
  // other things after script loaded
})();

Or promise's then

import Vue from 'vue'
import LoadScript from 'vue-plugin-load-script';

Vue.use(LoadScript);

Vue.loadScript('https://quvia.cz:4443/portalAPI.js').then(() => {
  // other things after script loaded
})
.catch(() => {
  // error
});

answered Apr 2, 2020 at 11:31

Wayne

543 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matěj Holubec Over a year ago

I can't do that, because all the import statements in main.js have to be top-level, that means that they can't be in an async function or .then .

sunwarr10r Over a year ago

@Wayne How do you call a method from the external script?

Alex · Accepted Answer · 2021-03-15 10:02:43Z

In my case, the problems were resolved by the "window" scope. Also, if you need to access any Vue element inside the "onload" function, you need a new variable for the "this" instance.

<script>
import { mapActions } from "vuex";
export default {
      name: "Payment",
      methods: {
        ...mapActions(["aVueAction"])
      },
      created() {
            let paywayScript = document.createElement("script");
            let self = this;
            paywayScript.onload = () => {
              // call to Vuex action.
              self.aVueAction();
              // call to script function
              window.payway.aScriptFunction();
            };
            // paywayScript.async = true;
            paywayScript.setAttribute(
              "src",
              "https://api.payway.com.au/rest/v1/payway.js"
            );
            document.body.appendChild(paywayScript);
      }
};
</script>

I worked with this on Vue 2.6.

tony19 · Accepted Answer · 2022-07-15 04:20:02Z

0

What you could do is use the beforeCreate() lifecycle that vue provides and load the script from there.

import LoadScript from 'vue-plugin-load-script';

export default {
  name: "App",
  beforeCreate() {
    LoadScript('https://quvia.cz:4443/portalAPI.js')
  }
};

there are also other lifecycles that might suit your needs which you can find here: https://v2.vuejs.org/v2/guide/instance.html

Also, calling the LoadScript this in the main.js would make sure it is done before any components load

edited Jul 15, 2022 at 4:20

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 2, 2020 at 11:18

Jochem

162 bronze badges

3 Comments

Matěj Holubec Over a year ago

That's strange, because I was calling the LoadScript in main.js, but the problem still existed. Here is my main.js file (link to Google Drive): drive.google.com/file/d/1cruKTZ606QsDIrD_74HY-FQi86nldCK5/…

Jochem Over a year ago

Have you tried using the beforeCreate lifecycle? I think that will be the solution to your problem. You can use the beforeCreate on the app.vue (or your starting component) so that it will available before all other components are loaded

sunwarr10r Over a year ago

@Jochem How do you call a method from the external script?

Collectives™ on Stack Overflow

Loading an external script before loading components - Vue.js

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related