Hello artisan, in this guide, we are going to render HTML as DOM element in Vue.js.

Table of Contents

• Render HTML
• Important Notes

Render HTML

We know that the innerHTML property sets or returns the HTML content (inner HTML) of an element. Vue has a built-in v-html directive to do the same thing.

Have a look at an exmaple:

<template>
  <div v-html="htmlContent"></div>
</template>

<script>
export default {
  data() {
    return {
      htmlContent: "<p style='color:green'>Welcome to MNP.</p>",
    };
  }
};
</script>

Important Notes

We should sanitize HTML code before rendering to v-html directive. Otherwise, hackers will able to do cross-site scripting (XSS) attacks.

If we try to bind HTML like {{htmlContent}}, Vue will display the code without rendering.

That’s it. Thanks for reading.