How do I hide the VueJS syntax while the page is loading?

You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.

HTML:

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

CSS:

[v-cloak] { display: none; }

I attached the following codepen. You can see the difference with and without v-cloak.

<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>

http://codepen.io/gurghet/pen/PNLQwy

Related