Sometimes, we want to render dynamic HTML elements in Vue.js.

In this article, we’ll look at how to render dynamic HTML elements in Vue.js.

How to render dynamic HTML elements in Vue.js?

To render dynamic HTML elements in Vue.js, we can use the v-html directive.

For instance, we write

<template>
  <div id="app">
    <div v-html="innerHtml"></div>
  </div>
</template>

<script>
//...
export default {
  //...
  computed: {
    innerHtml() {
      return "...";
    },
  },
  //...
};
</script>

to create the innerHtml computed property that returns a string with HTML code in it.

Then we render innerHtml into elements with

v-html="innerHtml"

Conclusion

To render dynamic HTML elements in Vue.js, we can use the v-html directive.