v-cloak

When using in-DOM templates, there can be a "flash of un-compiled templates": the user may see raw mustache tags until the mounted component replaces them with rendered content.

v-cloak will remain on the element until the associated component instance is mounted. Combined with CSS rules such as [v-cloak] { display: none }, it can be used to hide the raw templates until the component is ready.


[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

Did you know?

Typically, we place v-cloak on the parent div, to prevent the 'flash of uncompiled components'