Javascript is required
·
1 min read
·
2032 views

Vue Tip: Display Raw HTML

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.

Warning

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 & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.