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

Need a 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

Need a 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)

Need a 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)

Need a hint?

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