Raw HTML with v-html in Vue - Step-by-Step Execution

Concept Flow - Raw HTML with v-html

Vue Component Render

↓

Template with v-html

↓

Vue Inserts Raw HTML

↓

Browser Parses HTML

↓

HTML Rendered in DOM

Vue reads the v-html directive, inserts raw HTML string into the DOM, and the browser renders it as HTML elements.

Execution Sample

Vue

<template>
  <div v-html="rawHtml"></div>
</template>
<script setup>
const rawHtml = '<p><strong>Hello</strong> <em>Vue!</em></p>'
</script>

This code inserts the raw HTML string into the div, rendering formatted text inside.

Execution Table

Step	Action	v-html Value	DOM Change	Rendered Output
1	Vue reads template	'<p><strong>Hello</strong> <em>Vue!</em></p>'	No change yet	Empty div
2	v-html directive inserts HTML string	'<p><strong>Hello</strong> <em>Vue!</em></p>'	div.innerHTML set to rawHtml	div contains <p><strong>Hello</strong> <em>Vue!</em></p>
3	Browser parses inserted HTML	N/A	Creates <p>, <strong>, <em> elements inside div	Visible formatted text: Hello Vue!
4	Render complete	N/A	DOM stable with inserted HTML	User sees bold 'Hello' and italic 'Vue!' inside the div

💡 Raw HTML inserted and parsed, rendering complete.

Variable Tracker

Variable	Start	After Step 2	Final
rawHtml	undefined	'<p><strong>Hello</strong> <em>Vue!</em></p>'	'<p><strong>Hello</strong> <em>Vue!</em></p>'

Key Moments - 3 Insights

Why does the HTML inside v-html render as formatted text instead of plain text?

Because v-html sets the element's innerHTML property, the browser parses the string as HTML tags, not plain text. See execution_table step 3.

Can we use v-html to insert user input safely?

No, inserting raw HTML can cause security risks like XSS. Always sanitize user input before using v-html. This is important beyond the shown steps.

What happens if rawHtml changes after initial render?

Vue updates the innerHTML of the element with the new string, re-parsing and re-rendering the HTML. This dynamic update is similar to step 2 repeated.

Visual Quiz - 3 Questions

Look at the execution table, what is the DOM change at step 2?

A Browser creates new Vue component

B div innerHTML is set to the rawHtml string

C div is removed from DOM

D rawHtml variable is cleared

💡 Hint

Check the 'DOM Change' column in step 2 of the execution_table.

At which step does the browser parse the inserted HTML string into elements?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for the step describing browser parsing in the execution_table.

If rawHtml changes to '<h1>Title</h1>', what will happen in the execution flow?

A Vue updates innerHTML and browser parses new HTML

B Nothing changes because v-html only runs once

C Vue throws an error

D The div is removed from DOM

💡 Hint

Refer to key_moments about dynamic updates and execution_table step 2.

Concept Snapshot

v-html inserts raw HTML string into an element's innerHTML.
Vue replaces element content with parsed HTML.
Use carefully to avoid security risks.
Updates to bound variable re-render HTML.
Useful for trusted HTML content display.

Full Transcript

This visual trace shows how Vue's v-html directive works. First, Vue reads the template and finds the v-html directive with a raw HTML string. Then Vue sets the element's innerHTML to that string. The browser parses this string as HTML tags, creating elements inside the div. Finally, the formatted HTML is rendered on screen. The rawHtml variable holds the HTML string and can update dynamically, causing Vue to re-insert and re-parse the HTML. Beginners often wonder why the HTML renders formatted and not as plain text; this is because innerHTML parses the string as HTML. Also, using v-html with user input can be unsafe without sanitization. The execution table and variable tracker help visualize these steps clearly.

Practice

1. What does the v-html directive do in Vue?

easy

A. It listens for user input events.

B. It binds a JavaScript object to the element.

C. It inserts raw HTML content inside an element.

D. It applies CSS styles dynamically.

Solution

1. Step 1: Understand the purpose of v-html

   The v-html directive is used to insert raw HTML content inside an element in Vue.

2. Step 2: Compare with other options

   Other options describe different Vue features like event listening or styling, which are unrelated to v-html.

3. Final Answer:

   It inserts raw HTML content inside an element. -> Option C

4. Quick Check:

   v-html = inserts raw HTML [OK]

Hint: Remember: v-html inserts raw HTML inside elements [OK]

Common Mistakes:

• Confusing v-html with event binding
• Thinking v-html applies styles
• Assuming v-html binds JavaScript objects

2. Which of the following is the correct syntax to use v-html in a Vue template?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct directive syntax

   The correct directive to insert raw HTML is v-html, used as v-html="rawHtml".

2. Step 2: Check other options for correctness

   uses a non-existent directive :html.

   uses v-text which inserts plain text, not HTML.

   uses an invalid directive v-bind-html.

3. Final Answer:

   <div v-html="rawHtml"></div> -> Option B

4. Quick Check:

   Correct syntax = v-html="variable" [OK]

Hint: Use v-html="variable" to insert raw HTML [OK]

Common Mistakes:

• Using v-text instead of v-html
• Trying v-bind-html which is invalid
• Using shorthand :html which doesn't exist

3. Given the Vue template and data below, what will be rendered inside the div?

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

<script setup>
const htmlContent = '<strong>Hello</strong> <em>Vue</em>!'
</script>

medium

A. Hello Vue! (formatted with bold and italic)

B. <strong>Hello</strong> <em>Vue</em>! (raw text with tags visible)

C. Hello Vue! (plain text without formatting)

D. An error occurs because of invalid HTML

Solution

1. Step 1: Understand v-html rendering

   The v-html directive inserts the HTML string as actual HTML, so tags like <strong> and <em> become formatted text.

2. Step 2: Analyze the given HTML string

   The string contains <strong>Hello</strong> and <em>Vue</em>, so the output will show "Hello" in bold and "Vue" in italic.

3. Final Answer:

   <strong>Hello</strong> <em>Vue</em>! (formatted with bold and italic) -> Option A

4. Quick Check:

   v-html renders HTML tags as formatted content [OK]

Hint: v-html renders HTML tags as formatted content, not plain text [OK]

Common Mistakes:

• Expecting raw HTML tags to show as text
• Confusing v-html with v-text
• Assuming an error occurs with HTML tags

4. What is the main issue with this Vue template?

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

<script setup>
const htmlContent = '<p>Hello</p>'
</script>

medium

A. The v-html directive is missing quotes around the binding expression.

B. The htmlContent variable is not reactive.

C. The HTML string is invalid and causes an error.

D. v-html cannot be used inside a <div> element.

Solution

1. Step 1: Check v-html syntax

   The directive value must be quoted, like v-html="htmlContent". Here it is missing quotes.

2. Step 2: Verify other options

   The variable is valid and reactive by default. The HTML string is valid. v-html works on any element including div.

3. Final Answer:

   The v-html directive is missing quotes around the binding expression. -> Option A

4. Quick Check:

   v-html value must be quoted [OK]

Hint: Always put quotes around v-html binding expressions [OK]

Common Mistakes:

• Omitting quotes around v-html value
• Thinking v-html only works on certain tags
• Assuming HTML string causes errors

5. You want to display user-generated HTML safely using v-html. Which approach helps prevent security risks?

hard

A. Use v-html directly without any checks.

B. Replace v-html with v-text to render HTML tags.

C. Escape all HTML tags and then use v-html.

D. Sanitize the HTML string before binding it to v-html.

Solution

1. Step 1: Understand security risks of v-html

   Using v-html with user input can cause cross-site scripting (XSS) attacks if the HTML is not safe.

2. Step 2: Identify safe usage

   Sanitizing the HTML string removes dangerous code before inserting it, making it safe to use with v-html.

3. Step 3: Evaluate other options

   Using v-html directly is unsafe. Escaping tags then using v-html defeats the purpose. Using v-text shows raw text, not HTML.

4. Final Answer:

   Sanitize the HTML string before binding it to v-html. -> Option D

5. Quick Check:

   Sanitize user HTML before v-html to prevent XSS [OK]

Hint: Always sanitize user HTML before using v-html [OK]

Common Mistakes:

• Using v-html directly with user input
• Escaping HTML then using v-html (no effect)
• Confusing v-text with v-html for HTML rendering