How To Run VueJS Code Only After Vue Is Fully Loaded And Initialized?

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

Solution 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

Solution 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.

Solution 3:

https://vuejs.org/v2/api/#mounted

this helped me

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}