v-cloak

Hides un-compiled template markup until Vue finishes mounting.

Since Vue 3.0 Spec ↗

Syntax

v-cloak

Returns

directive — Attribute removed once the component is mounted.

Examples

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

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

Notes

Vue removes the `v-cloak` attribute once the instance is mounted. Combined with a `[v-cloak] { display: none }` rule it prevents a flash of raw `{{ mustache }}` syntax during initial load. Mostly relevant when using Vue via a CDN/in-DOM template rather than a build step with SFCs.