how to get rid of this {{ user.id }} (curly braces) in vuejs while a page is in loading state

Question

I'm using vuejs in my project and noticed that when a page is in loading state, I see something like this {{ user.id }} {{ user.name }} which is very annoying.
And after the page is fully loaded, I can see the userId and user name properly.

How to stop showing the these curly braces of vuejs in a page while it is in loading state?

Answer 1

There is a directive built for this purpose: v-cloak. http://vuejs.org/api/#v-cloak

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>