Noob Coder Noob Coder - 1 year ago 143
Javascript Question

how to get rid of this {{ }} (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

{{ }} {{ }}
which is very annoying.

And after the page is fully loaded, I can see the
user name

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

Answer Source

There is a directive built for this purpose: 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 }}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download