How to Use v-pre Directive in Vue for Raw Content Rendering

In Vue, use the v-pre directive on an element to skip Vue's template compilation for that element and its children. This renders the content exactly as written, useful for displaying raw mustache syntax or large static content without processing.

Syntax

The v-pre directive is added as an attribute to an HTML element to tell Vue to skip compiling that element and its children.

Example parts:

• v-pre: The directive itself, placed on an element.
• Element: Any HTML tag where you want to skip Vue compilation.

html

<div v-pre>{{ raw mustache syntax }}</div>

Output

{{ raw mustache syntax }}

Example

This example shows how v-pre renders mustache syntax as plain text instead of processing it as Vue template expressions.

vue

<template>
  <div>
    <p>Normal mustache: {{ message }}</p>
    <p v-pre>Raw mustache: {{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue!')
</script>

Output

Normal mustache: Hello Vue!
Raw mustache: {{ message }}

Common Pitfalls

Common mistakes when using v-pre include:

• Expecting Vue expressions inside v-pre blocks to be evaluated — they are not.
• Using v-pre on elements where you want dynamic content, which prevents updates.
• Forgetting that v-pre applies to the element and all its children, so nested bindings are also skipped.

Correct usage is only for static or raw content display.

html

<!-- Wrong: expecting dynamic update -->
<p v-pre>{{ dynamicText }}</p>

<!-- Right: use v-pre only for raw display -->
<p v-pre>{{ rawText }}</p>

Quick Reference

• Purpose: Skip Vue compilation on element and children.
• Use case: Show raw mustache syntax or large static blocks.
• Effect: Content inside v-pre is rendered exactly as written.
• Note: No reactive updates inside v-pre.

Key Takeaways

Use v-pre to skip Vue template compilation on an element and its children.

v-pre renders content exactly as written, useful for showing raw mustache syntax.

Do not expect reactive updates inside elements with v-pre.

Apply v-pre only to static content or code snippets you want to display literally.