Hiding vue.js template before it is rendered

Question

I am trying to hide the vue.js template\'s contents before it is fully rendered. Consider following template:

Answer 1

Vue already has a v-cloak directive built in, you just need to add the relevant css class:

[v-cloak] {
  display: none;
}

And then apply it to your element like so:

  {{message}}

Here's the JSFiddle: https://jsfiddle.net/2jbe82hq/

If you remove v-cloak in that fiddle you will see the mustached {{message}} before the instance has been mounted.

If you want to display a loader while you retrieve data from your server, then you combine a boolean flag with v-if to show and hide the loader:

var vm = new Vue({
  el: "#app",
  created(){
    this.$http.get('url').then(response => {
      // set loader to false
      this.loading = false;
    });
  },
  data: {
    message: 'Hello Vue!',
    loading: true
  }
});

You can then do:

   Loading...


    {{message}}

Here's the JSFiddle for that: https://jsfiddle.net/fa70phLz/

It's also possible to use a loading class as well and then use v-bind:class to apply and remove the class based on the flag, which is useful if you want to overlay the entire page with a loader.