Mokkapps Logo

Vue Tip: Display Raw HTML

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
January 24, 2022
1 Minuten Lesezeit
- Ansichten

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 tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Sie haben einen Fehler in diesem Artikel gefunden? Sie möchten gerne etwas klarstellen, aktualisieren oder hinzufügen?

Alle meine Artikel können auf Github editiert werden. Jeder Fix ist willkommen, egal wie klein er sein mag!

Ändern auf Github