How to run VueJS code only after Vue is fully load

Question

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!

Answer 1

use vue mounted() to run any code on page load, and updated() to run after any component operations, so a perfect solution would be combining both Roy j and vue lifecycle hooks

mounted() {
    window.addEventListener('load', () => {
         // run after everything is in-place
    })
},

// 99% using "mounted()" with the code above is enough, 
// but incase its not, you can also hook into "updated()"
//
// keep in mind that any code in here will re-run on each time the DOM change
updated() {
    // run something after dom has changed by vue
}

note that you can omit the window.addEventListener() and it still going to work but it might miss + if you are using something like jquery outerHeight(true) its better to use it inside the window event to make sure you are getting correct values.

Update 1 :

instead of window.addEventListener('load') there is also another way by using document.readyState so the above can be

mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
        // run code here
    } 
  }
},

Update 2 :

the most reliable way i've found so far would be using debounce on $nextTick, so usage becomes

import debounce from 'lodash/debounce'

// bad
updated() {
    this.$nextTick(debounce(() => {
        console.log('test') // runs multiple times
    }, 250)) // increase to ur needs
}

// good
updated: debounce(function () {
    this.$nextTick(() => {
        console.log('test') // runs only once
    })
}, 250) // increase to ur needs

when using debounce with updated it gets tricky, so make sure to test it b4 moving on.

Update 3 :

you may also try MutationObserver

Answer 2

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.