v-cloak

NOTE

This directive is only needed in no-build-step setups.

When using in-DOM templates, there can be a "flash of un-compiled templates": the user may see raw mustache tags before Vue mounts and renders the component.

The v-cloak directive is designed to address this, but it does not apply any visual effect by itself. Instead, it acts as a marker that remains on the element until the associated component instance has finished mounting. To effectively prevent the flash, v-cloak must be paired with a CSS rule that hides elements.

Example:

css

[v-cloak] {
  display: none;
}

html

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

In this example, the <div> remains hidden until Vue has fully compiled and rendered the template.

Note that Vue automatically removes the v-cloak attribute once compilation is complete, which in-turn removes the display: none; CSS rule, therefore making the element visible.

v-cloak ​

v-cloak