What is v-pre used for?

The v-pre directive is used to tell Vue: "do not compile this part of the template".

In other words:

v-pre disables processing of Vue expressions ({{ }}, directives, etc.) and just outputs the content as is.

---

#What does v-pre do?

#Skips template compilation

Vue will not interpret:

• interpolations: {{ message }}
• directives: v-if, v-for, v-model
• any expressions

#Speeds up the first render

Since Vue does not analyze the content, this can slightly improve performance in large templates.

---

#Usage example

The user will see:

{{ this will not be interpolated }}

In other words, Vue simply ignores the expression.

---

#Example: showing a code sample with mustache syntax

If you need to display a Vue template inside Vue:

Without v-pre, Vue would try to interpret {{ user.name }}.

---

#Example: speeding up the render of a static block

Vue will not spend time analyzing it, so it renders faster.

---

#What can you not use with v-pre?

You cannot put Vue directives inside it, because they will not be processed:

---

#Important to understand

Do not confuse v-pre with:

#v-once

• renders once, then updates further
• Vue processes the template, but then freezes it

#v-pre

• does not process the template at all
• everything inside is treated like plain HTML/text