Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Display Raw HTML

Vue Tip: Display Raw HTML Image
Template

The double mustaches interpret the data as plain text, not HTML:

Component.vue
<script setup lang="ts"> const rawHtml = '<span style="color: red">This should be red.</span>'; </script> <template> <p>{{ rawHtml }}</p> </template>

In this example, the component will render: <span style="color: red">This should be red.</span>

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

Component.vue
<script setup lang="ts"> const rawHtml = '<span style="color: red">This should be red.</span>'; </script> <template> <p v-html="rawHtml" /> </template>

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

Vue is not a string-based templating engine, so we cannot use it to compose template partials with v-html. Instead, components are favored as the fundamental unit for UI reuse and repurposing.

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 are looking for a safe replacement for v-html, you can use the vue-dompurify-html library to sanitize the HTML content before rendering it.

If you liked this Vue tip, follow me on X 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.

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.