Javascript is required
Mokkapps LogoMichael Hoffmann

Vue Tip: Display Raw HTML

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Jan 24, 2022
1 min read
Vue Tip: Display Raw HTML Image

The double mustaches {{ text }} interprets the data as plain text, not HTML:

<p>Using text interpolation: {{ rawHtml }}</p>

In order to output real HTML, you will need to use the v-html directive:

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

The contents of the span will be interpreted as plain HTML, and all data bindings are ignored.

We cannot use v-html to compose template partials because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.


Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter.