How To Get Rid Of This {{ User.id }} (curly Braces) In Vuejs While A Page Is In Loading State

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 i

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