How to run VueJS code only after Vue is fully loaded and initialized?
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
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.