v-pre Skip Compilation
Last updated: 2026-10-22
v-pre Skip Compilation
v-pre skips compilation for this element and its children, showing template syntax like {{ }} literally — useful when displaying template code.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<span v-pre>{{ this will not be compiled }}</span>
<code v-pre>{{ msg }}</code>⚙️ Arguments
| expression | No expression |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The page shows 'Shown as-is: {{ msg }}' — braces stay literal.💡 Key Points
ℹ️ Note Use it in tutorials or docs to display template syntax without interpolation.
💡 Tip v-pre applies to all descendants — put it on the whole code-block container.
⚠️ Warning Directives inside a v-pre element (v-if etc.) are ignored too.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Typical use case?
A Showing template syntax in tutorials or docs without interpolation.
Q Do directives in children still run?
A No — the entire subtree skips compilation.
Q How is it different from v-once?
A v-pre never compiles (keeps raw syntax); v-once compiles once and freezes.
