Vue 2 hook ready

Question

Vue 2, Is there a lifecycle hook that actually refers to "finished rendering"? I want to put a loading screen when entering a page and it fades away and show the page content once Vue is finished loading everything, but I have tried most of the lifecycle hook but not working. Here is something I would try to do if updated refers to "finished rendering":

updated(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    this.loading = false;
  }
}

If there is not such a lifecycle hook, what would you suggest me to do instead? Thanks

Answer 1

Probably the method you're looking for is mounted(), this is fired when the vue component is ready. You can check the Vue life-cycle documentation here

so probably your Vue instance would look something like this:

var app = new Vue({
    el: '#app',
    /*
     * When the instance is loaded up
     */
    mounted: function () {
        this.loaded()
    },
    methods: {
        loaded: function () {
            var vm = this
            this.loading = false
        }
    }
})

Answer 2

To make sure that all child components have also been mounted, use vm.$nextTick - much cleaner than a setTimeout:

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

Source: https://v2.vuejs.org/v2/api/#Options-Lifecycle-Hooks