How to Display Unescaped HTML in VueJS?

Last Updated : 10 Sep, 2024

In Vue.js, the default behavior is to treat HTML content as plain text to prevent Cross-Site Scripting (XSS) attacks. However, there are scenarios where we may need to display raw HTML content in the Vue components such as when rendering rich text from the database or a CMS. Vue.js provides a couple of methods to render unescaped HTML safely while caution is needed to avoid security risks.

These are the following approaches:

Table of Content

Using the v-html Directive
Creating a Custom Vue Component to Render HTML

Using the v-html Directive

The Vue.js provides the v-html directive to display raw HTML content. This directive binds an element’s innerHTML to the provided value effectively rendering any HTML tags and content. Be cautious when using this directive, especially with the dynamic data as it can introduce the XSS vulnerabilities.

Syntax:

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

Example: This example shows the use of v-html Directives to display the unescaped HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Vue.js v-html Example</title>
    <!-- Including Vue.js from CDN -->
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h2>Rendered HTML Content:</h2>
        <div v-html="htmlContent"></div>
    </div>
    <script>
        // Vue application instance
        const app = Vue.createApp({
            data() {
                return {
                    htmlContent:
'<p style="color:blue;">This is <strong>unescaped</strong> HTML content!</p>'
                };
            }
        });
        app.mount('#app');
    </script>
</body>

</html>

Output:

Creating a Custom Vue Component to Render HTML

Another approach is to the create a custom Vue component that handles raw HTML content. This approach gives more control allowing for the sanitation or custom logic before rendering the content. We can define a props attribute to pass the HTML string to the component.

Syntax:

<custom-html-renderer :content="htmlContent"></custom-html-renderer>

Example: This example shows the use of custom vue component to display the unescaped HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Vue.js Custom Component Example</title>
    <!-- Including Vue.js from CDN -->
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h2>Custom Component Rendering HTML:</h2>
        <custom-html-renderer :content="htmlContent">
        </custom-html-renderer>
    </div>
    <script>
        // Vue application instance
        const app = Vue.createApp({
            data() {
                return {
                    htmlContent: 
'<p style="color:green;">This is <strong>unescaped</strong> HTML content rendered by a custom component!</p>'
                };
            }
        });
        app.component('custom-html-renderer', {
            props: ['content'],
            template: `<div v-html="content"></div>`
        });
        app.mount('#app');
    </script>
</body>

</html>

Output:

Conclusion

Displaying unescaped HTML in Vue.js can be done using built-in v-html directive or by the creating a custom component to the handle the raw HTML rendering. Both approaches should be used cautiously especially when rendering user-generated content to the prevent XSS vulnerabilities. Use input sanitization when necessary to the ensure the security of the application.