Raw HTML with v-html in Vue

Introduction

Sometimes you want to show HTML code directly inside your Vue app. The v-html directive lets you do that by inserting raw HTML into your page.

Displaying user-generated content that includes HTML formatting, like comments or posts.

Showing formatted text from a CMS or external source that comes as HTML.

Embedding small HTML snippets like icons or styled text inside your component.

Rendering HTML content that changes dynamically based on user input or API data.

Syntax

Vue

<element v-html="rawHtmlContent"></element>

The value inside v-html must be a string containing valid HTML.

Vue will replace the element's inner content with this HTML.

Examples

This will insert the HTML stored in the message variable inside the div.

Vue

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

Directly using a string with HTML tags inside v-html to render formatted text.

Vue

<p v-html="'<strong>Bold text</strong> and <em>italic text</em>'"></p>

Sample Program

This Vue component shows how to use v-html to display raw HTML stored in a reactive variable. The HTML tags inside the string are rendered as formatted text.

Vue

<template>
  <div>
    <h2>Raw HTML Example</h2>
    <div v-html="rawHtml"></div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const rawHtml = ref('<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>')
</script>

Important Notes

Be careful with v-html because it can open security risks if you insert untrusted HTML (like user input) without cleaning it first.

Use v-html only when you trust the HTML content or sanitize it properly.

Summary

v-html lets you insert raw HTML inside your Vue components.

It replaces the element's inner content with the HTML string you provide.

Always be cautious about security when using v-html.