How to Render HTML in Vue.js

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

Table of Contents

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:

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

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

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.

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.