How to hide uncompiled mustache {{ code }} in Vue.js

In this tutorial, you’ll learn a simple trick that will hide Vue.js code while the page is loading.

I was working on a WordPress project that contained a custom Vue.js component inside a page template. I loaded external Vue.js scripts, created a new app and it worked just great… until you reloaded the page.

Every time you reload the page you see uncompiled Vue.js syntax such as mustache bindings {{ }}.

Showing uncompiled code for a few seconds might look unprofessional. That’s why it’s better to hide it while the page is loading.

Hiding mustache bindings

Luckily, there’s a v-clock binding that you can assign to any DOM element. Once the application finishes loading the binding will disappear.

The trick is combining v-clock with CSS rules.

[v-cloak] {
  display: none;
}

With your app.

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

That’s it, you will no longer see the code above, while the Vue.js application is loading.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-hide-uncompiled-code

PS: You can also check how to get the first item in Vue.js array, how to add a class to body tag in Vue.js and other Vue.js tutorials.