Raw HTML with v-html in Vue - Mini Project: Build & Apply

Display Raw HTML Using v-html in Vue

📖 Scenario: You are building a simple Vue app that shows a message containing HTML tags. You want the HTML tags to be rendered as actual HTML, not as plain text.

🎯 Goal: Build a Vue component that uses v-html to display raw HTML content stored in a data property.

📋 What You'll Learn

Create a Vue component with a data property called rawMessage containing HTML tags.

Add a configuration variable called isVisible to control if the message is shown.

Use v-html directive to render the raw HTML inside a <div>.

Add a button to toggle the visibility of the raw HTML message.

💡 Why This Matters

🌍 Real World

Displaying user-generated content or formatted messages safely in web apps, such as blog posts or comments with HTML formatting.

💼 Career

Understanding how to render raw HTML in Vue is important for building interactive and dynamic user interfaces that handle rich text content.

1

Set up the raw HTML data property

Create a Vue component with a data function that returns an object containing a property called rawMessage with the exact value: '<strong>Hello</strong>, <em>Vue Learners!</em>'.

Vue

  
  



// Create data property rawMessage with the exact HTML string

Hint

Use ref from Vue to create a reactive variable called rawMessage with the given HTML string.

2

Add a visibility control variable

Add a new reactive variable called isVisible using ref and set it to true inside the <script setup> section.

Vue

  
  



import { ref } from 'vue'

const rawMessage = ref('Hello, Vue Learners!')
// Add isVisible variable here

Hint

Create isVisible as a reactive boolean variable set to true.

3

Render raw HTML with v-html

Inside the <template>, add a <div> that uses v-if="isVisible" and the v-html directive to display the content of rawMessage as raw HTML.

Vue

  
    
  



import { ref } from 'vue'

const rawMessage = ref('Hello, Vue Learners!')
const isVisible = ref(true)

Hint

Use v-if="isVisible" to show the div only when visible, and v-html="rawMessage" to render the HTML content.

4

Add a button to toggle visibility

Add a <button> inside the <template> that toggles the value of isVisible when clicked. Use the @click event with an inline arrow function to set isVisible.value = !isVisible.value. The button text should be Toggle Message.

Vue

  
    
    
  



import { ref } from 'vue'

const rawMessage = ref('Hello, Vue Learners!')
const isVisible = ref(true)

Hint

Add a button with @click event that toggles isVisible.value between true and false.

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