Vue - How to render HTML in vue components Vue - How to render HTML in vue components vue.js vue.js

Vue - How to render HTML in vue components


Look at the below snippet -

Note - You can't render html inside {{ }} because it get added to text node of the element. To render it as an html you need to use v-html and have your function which return element wrapping your text

new Vue({  el: "#app",  data: {    foo: 'asdasd'  },  methods: {   span(text) {    return `<span> ${text} </span>`   }  }})
span { color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">  <h1>     Render whatever you want  </h1>  <div v-html="span('Hello world')" /> </div>