by Sai gowtham

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:

App.vue
<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.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course