Raw HTML with v-html in Vue - Deep Dive

Overview - Raw HTML with v-html

What is it?

In Vue.js, the v-html directive lets you insert raw HTML code directly into your webpage. Instead of showing HTML tags as text, it renders them as actual HTML elements. This is useful when you want to display content that includes HTML formatting, like bold text or links, coming from dynamic sources.

Why it matters

Without v-html, Vue would show HTML tags as plain text, making it hard to display formatted content dynamically. v-html solves this by telling Vue to treat the content as real HTML. However, it also introduces risks if used carelessly, like security issues from unsafe HTML. Understanding v-html helps you balance dynamic content display with safety.

Where it fits

Before learning v-html, you should understand Vue's template syntax and data binding basics. After mastering v-html, you can explore Vue's component system and advanced directives for dynamic UI building.

Mental Model

Core Idea

v-html tells Vue to treat a string as real HTML and insert it into the page instead of plain text.

Think of it like...

Imagine writing a letter where you want to include a photo. Normally, you might describe the photo in words, but with v-html, you actually paste the photo inside the letter so the reader sees it directly.

Vue Component
┌─────────────────────────────┐
│ Template with v-html        │
│ ┌───────────────────────┐ │
│ │ <div v-html="content">│ │
│ │   <!-- raw HTML here -->│ │
│ └───────────────────────┘ │
└─────────────────────────────┘

Data
┌───────────────┐
│ content: "<b>Hello</b>" │
└───────────────┘

Rendered Output
┌───────────────┐
│ <div>        │
│   <b>Hello</b>│
│ </div>       │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Understanding Vue Template Binding

Concept: Learn how Vue binds data to templates using double curly braces.

In Vue, you can display data by placing it inside double curly braces like {{ message }}. This shows the data as plain text on the page. For example, if message is 'Hello', Vue will show the text including the tags, not the formatted bold text.

Result

The page shows the string 'Hello' exactly as typed, including the angle brackets.

Understanding that Vue escapes HTML by default helps you see why raw HTML doesn't render without special handling.

2

Foundation

Introducing v-html Directive

Concept: Learn that v-html lets Vue render a string as actual HTML inside an element.

Instead of {{ content }}, you use

. If content is 'Hello', Vue will render the word Hello in bold, not show the tags as text.

Result

The page shows the word Hello in bold formatting.

Knowing v-html changes how Vue treats strings from plain text to HTML is key to displaying formatted content.

3

Intermediate

Security Risks of v-html Usage

🤔Before reading on: Do you think v-html automatically protects you from unsafe HTML? Commit to yes or no.

Concept: Understand that v-html can introduce security risks if used with untrusted content.

v-html inserts raw HTML directly into the DOM. If the HTML comes from users or external sources, it might contain harmful scripts (XSS attacks). Vue does not sanitize this automatically, so you must clean or trust the content before using v-html.

Result

Unsafe HTML can run malicious code in your app if not handled properly.

Recognizing the security risk helps you avoid common vulnerabilities when using v-html.

4

Intermediate

When to Use v-html vs Text Binding

🤔Before reading on: Should you always use v-html for any dynamic content? Commit to yes or no.

Concept: Learn when it is appropriate to use v-html and when to stick with normal text binding.

Use v-html only when you need to render HTML formatting from trusted sources. For plain text or user input, use {{ }} to avoid security risks. Overusing v-html can make your app vulnerable and harder to maintain.

Result

You use v-html selectively, improving safety and clarity.

Knowing when to use v-html prevents security issues and keeps your app stable.

5

Advanced

Handling Dynamic HTML Safely

🤔Before reading on: Do you think Vue sanitizes HTML inside v-html by default? Commit to yes or no.

Concept: Explore techniques to safely insert dynamic HTML using sanitization libraries or trusted sources.

Since Vue does not sanitize HTML, you can use libraries like DOMPurify to clean HTML strings before passing them to v-html. This removes dangerous scripts while keeping formatting. Alternatively, only use v-html with content you fully control.

Result

Your app renders formatted HTML safely without security holes.

Understanding how to sanitize HTML before v-html usage is crucial for secure production apps.

6

Expert

Performance and Reactivity Considerations

🤔Before reading on: Does v-html content update reactively like normal Vue bindings? Commit to yes or no.

Concept: Learn how v-html affects Vue's reactivity and rendering performance.

v-html replaces the inner HTML of an element directly, bypassing Vue's virtual DOM diffing for that content. This means Vue does not track changes inside the raw HTML. Frequent updates to v-html content can cause full re-renders of that element, impacting performance. Also, reactive updates inside raw HTML are not possible.

Result

You understand v-html's limits in reactivity and optimize updates accordingly.

Knowing v-html's impact on reactivity helps you design efficient Vue apps and avoid unexpected bugs.

Under the Hood

Vue compiles templates into render functions that create virtual DOM nodes. When using v-html, Vue skips creating virtual DOM nodes for the inner content and directly sets the element's innerHTML property with the raw HTML string. This bypasses Vue's normal reactivity tracking inside that element, treating the content as opaque HTML.

Why designed this way?

v-html was designed to allow developers to insert trusted HTML snippets easily without complex parsing or component creation. It trades off reactivity and safety for simplicity and flexibility. Alternatives like building components for every HTML fragment would be cumbersome and less dynamic.

Vue Template Compilation
┌─────────────────────────────┐
│ Template with v-html        │
│ ┌───────────────────────┐ │
│ │ <div v-html="html">  │ │
│ └───────────────────────┘ │
└─────────────┬──────────────┘
              │
              ▼
  Render Function sets innerHTML
              │
              ▼
  DOM Element.innerHTML = html string
              │
              ▼
  Raw HTML rendered, no virtual DOM diffing inside

Myth Busters - 4 Common Misconceptions

Quick: Does v-html sanitize HTML content automatically? Commit to yes or no.

Common Belief: v-html automatically cleans unsafe HTML to protect the app.

Reality: Vue does not sanitize HTML in v-html; it inserts it as-is, so unsafe scripts can run.

Why it matters: Assuming automatic sanitization leads to security vulnerabilities like cross-site scripting attacks.

Quick: Can you use v-html to insert Vue components dynamically? Commit to yes or no.

Common Belief: v-html can render Vue components inside the raw HTML string.

Reality: v-html only inserts plain HTML; Vue components inside the string won't work or be reactive.

Why it matters: Trying to render components via v-html causes bugs and confusion about reactivity.

Quick: Does v-html content update reactively like normal Vue bindings? Commit to yes or no.

Common Belief: v-html content updates reactively and efficiently like other bindings.

Reality: v-html replaces innerHTML directly, so Vue does not track changes inside it, causing full re-renders on updates.

Why it matters: Misunderstanding this can cause performance issues and unexpected UI behavior.

Quick: Is it safe to use v-html with any user input? Commit to yes or no.

Common Belief: You can safely use v-html with any user input because Vue handles it securely.

Reality: Using v-html with untrusted user input is unsafe and can lead to security breaches.

Why it matters: Ignoring this leads to serious security flaws in your application.

Expert Zone

1

v-html disables Vue's template compilation inside the element, so directives and bindings inside raw HTML won't work.

2

Using v-html on large or frequently changing content can cause performance bottlenecks due to full innerHTML replacements.

3

Sanitizing HTML before v-html insertion is a best practice but requires careful choice of libraries and configuration to avoid breaking desired formatting.

When NOT to use

Avoid v-html when you need reactive, interactive content or when rendering user-generated input without sanitization. Instead, use Vue components, slots, or text interpolation with escaping. For complex HTML, consider building components or using markdown parsers that output safe HTML.

Production Patterns

In production, v-html is often used to render trusted CMS content or formatted text from APIs after sanitization. Developers combine v-html with libraries like DOMPurify and carefully control update frequency. It is rarely used for user input or interactive UI parts.

Connections

Cross-Site Scripting (XSS)

v-html usage can introduce XSS vulnerabilities if unsafe HTML is inserted.

Understanding XSS helps developers realize why raw HTML insertion must be sanitized and trusted.

Virtual DOM

v-html bypasses Vue's virtual DOM diffing for inserted HTML content.

Knowing how virtual DOM works clarifies why v-html content is not reactive and can impact performance.

Content Management Systems (CMS)

CMS often store HTML content that frontend apps render using v-html after sanitization.

Recognizing this connection helps understand real-world use cases and security practices for v-html.

Common Pitfalls

#1 Inserting untrusted user input directly with v-html.

Wrong approach:

Correct approach:

import DOMPurify from 'dompurify';
const safeInput = DOMPurify.sanitize(userInput);

Root cause:

Misunderstanding that v-html does not sanitize content and trusting raw user input.

#2 Expecting Vue directives inside v-html content to work.

Wrong approach:

Correct approach:

Root cause:

Not realizing v-html inserts plain HTML without Vue compilation or reactivity.

#3 Using v-html for frequently changing large HTML blocks causing slow updates.

Wrong approach:

Updating a large HTML string bound to v-html every second.

Correct approach:

Break content into Vue components and update reactive data instead of raw HTML.

Root cause:

Ignoring performance impact of full innerHTML replacements on frequent updates.

Key Takeaways

v-html lets Vue render raw HTML strings as actual HTML elements instead of plain text.

Using v-html with untrusted content is dangerous and requires sanitization to prevent security risks.

v-html bypasses Vue's reactivity inside the inserted HTML, so updates replace the whole content.

Use v-html only for trusted, static, or sanitized HTML content, and prefer Vue components for interactive UI.

Understanding v-html's behavior helps balance dynamic content needs with app security and performance.