Vue Tip: Display Raw HTML

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.