Sometimes, we want to hide the Vue.js syntax while the page is loading.

In this article, we’ll look at how to hide the Vue.js syntax while the page is loading.

How to hide the Vue.js syntax while the page is loading?

To hide the Vue.js syntax while the page is loading, we can use the v-cloak directive to hide the Vue instance until compilation is done.

For instance, we write

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

to add the v-cloak directive to the div that we want to hide until it’s rendered.

Then we write

[v-cloak] { display: none; }

to hide anything with the v-cloak directive until it’s rendered.

Conclusion

To hide the Vue.js syntax while the page is loading, we can use the v-cloak directive to hide the Vue instance until compilation is done.