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

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