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.
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:
Vue Tip: Automatic Global Registration of Base Components
We can use webpack to register our Vue.js base components globally.
Vue Tip: Scroll to Top When Navigating to a New Route
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does.