How to render a HTML string in Vue app

Learn, how to render the html string as real dom elements in Vue.

Note: If we try to use vue template syntax {{ }} to render an html string, vue will be treated as a plain text instead of real html.

Rendering the HTML

Vue has a built-in v-html directive by using that we can render a html string.

The v-html directive is a vue version of browser innerHTML property.

Example:

<template>
  <div v-html="htmlString"></div></template>

<script>
export default {
  data() {
    return {
      htmlString: "<h1 style='color:red'>Hello Gowtham</h1>",    };
  }
};
</script>

This above code will render an h1 element with red color inside the div.

Note: By using the v-html directive you are vulnerable to cross-site scripting attacks(XSS), to prevent from it sanitize your html before passing it to v-html directive.