Display unescaped HTML in Vue.js templates

in Code Write a comment

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

' } })


<div id="app">
  <h2>Render HTML:</h2>
  <div v-html="htmlData"></div>
  <h2>Unescaped HTML</h2>
  <div>{{ htmlData }}</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.

Hi, I'm Renat 👋


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

Want to share this with your friends?

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

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment