v-cloak Hide Un-compiled Template
Last updated: 2026-10-22
v-cloak Hide Un-compiled Template
v-cloak stays on the element until compilation finishes; paired with CSS it hides the raw template and prevents the {{ }} flash on first paint.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
[v-cloak] { display: none; }
<div v-cloak>{{ msg }}</div>⚙️ Arguments
| expression | No expression |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
On slow networks the raw braces stay hidden until Vue mounts and the real text appears.💡 Key Points
⚠️ Warning You must add the CSS rule [v-cloak]{display:none} yourself — the attribute carries no style.
ℹ️ Note Only needed with the full build and no bundler; compiled SFC output never flashes.
💡 Tip Vue removes the attribute after compilation, so the hiding rule stops applying.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why must I write the CSS myself?
A It is only a marker attribute — you declare [v-cloak]{display:none}.
Q Is it still needed in modern projects?
A Not with SFC bundling (no raw template); only full-build CDN pages need it.
Q Is the attribute removed after compile?
A Yes — Vue removes it on mount and the hiding rule stops applying.
