Question

37

How to run VueJS code only after Vue is fully loaded and initialized?

rated 0 times [ 44] [ 7] / answers: 1 / hits: 109635 / 7 Years ago, thu, april 27, 2017, 12:00:00

I am working on a Vue component that will be placed on multiple websites via a CMS system. The issue I encounter is that even if my js scripts loading order is correct, sometime I get this error:

Uncaught ReferenceError: Vue is not defined

    at HTMLDocument.<anonymous>

Vue is loaded via cdn and it's above the component's code.

All the Vue code is run like this:

document.addEventListener(DOMContentLoaded, () => {

  // here is the Vue code

});

I even added a setTimeout() inside the DOMContentLoaded event and still did not do the trick.
window.onload = function() did not work either in all cases. I still got that error from time to time.
The scripts are loaded in the body.

Do you have any idea what it can be another approach? I want to be sure that in the moment the Vue code is fired, Vue is loaded and ready to be initialized on the page.
Thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylerdamiena

Add To Favorites

Follow

Total Points: 139

Total Questions: 90

Total Answers: 118

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 7 Years ago albert · Accepted Answer

Use the load event to wait until all resources have finished loading:

<script>

  window.addEventListener(load, function(event) {

    // here is the Vue code

  });

</script>

Further explanation

DOMContentLoaded is an event fired when the HTML is parsed and
rendered and DOM is constructed. It is usually fired pretty fast in
the lifetime of the app. On the other hand, load is only fired when
all the resources (images, stylesheets etc.) are retrieved from the
network and available to the browser.

You can also use the load event for a specific script.