What can be annoying with Vue.js is that the HTML elements are present in your page before Vue.js reads and compiles it. If your page goes bigger and there's a lot's of vue.js directive, methods, watchers, etc, it would certainly take sometime to fully compile the full page. During that time a user can see unrendered html in the page. Which doesn't look good at the first moment the page loads. After Vue compiles the file, all is fine. But how do you stop that so that there won't be any glitch before Vue renders the page? The answer is v-cloak. If you put the v-cloak directive on any element, Vue will add CSS related to that directive and remove the v-cloak directive after Vue successfully compiles. This means we can hide the element using display:none; and as soon as Vue removes the directive the content will be visible with fully rendered page. This will give the user a better experience.
<style>
[v-cloak] {
display: none;
}
</style>
Okay, you have defined the style. Now you can use this directive on the element which you want to hide before successfully compiled.
<div id="app">
<div v-cloak>
Hello {{ name }}
</div>
</div>
You can use v-cloak on multiple element, it doesn't matter. You can also use v-cloak on the root element, so that you don't have to use it on multiple places.
If you inspect the DOM, there will be no attribute called v-cloak, as Vue removes it after the compilation.