In this tutorial, you’ll learn how to display unescaped HTML in Vue.js templates.

Starting from Vue.js 2.0 you can use v-html directive to render HTML. See the example below:

new Vue({
  el: "#app",
  data: {
    htmlData: '
Hello world
'
  }
})

HTML

<div id="app">
  <h2>Render HTML:</h2>
  <div v-html="htmlData"></div>
  
  <h2>Unescaped HTML</h2>
  <div>{{ htmlData }}</div>
</div>

The result

As you can see in the example above if you place your HTML code inside v-html directive it will be rendered as unescaped HTML. However, if you render your code in double moustaches it will be displayed as a plain text.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/unescaped-html-vue-js

PS: Make sure you check other Vue.js tutorials, e.g. how to toggle a class on click in Vue.js.