Vue v-html Directive
Example
Using the v-html directive to output a list containing <ol> and <li> tags.
<div id="app">
<div>{{ htmlContent }}</div>
<div v-html="htmlContent"></div>
</div>
Try it Yourself »
See more examples below.
Definition and Usage
The v-html directive is used to insert HTML tags and text into an element.
If you try to output HTML tags using text interpolation (using curly braces {{ }}), the result will be just a text string. See the example above.
Scoped styling defined in Single-File Components (SFCs) using <style scoped> will not affect HTML from the v-html directive. See the first example below.
To achieve scoped styling for HTML included with v-html in SFCs we can use CSS modules with <style module>. See the second example below.
Note: Pages where users can somehow dictate the content that is included with v-html, are at risk of Cross-site scripting (XSS) attacks.
More Examples
Example 1
Using scoped styling, the styling does not work for HTML included with v-html.
This problem is fixed in the next example.
<template>
<h1>Example</h1>
<p>When using scoped styling, styling for HTML included with the 'v-html' directive does not work.</p>
<p><a href="showvue.php?filename=demo_ref_v-html2_2">See the next example</a> for how we can fix this by using CSS Modules.</p>
<div v-html="htmlContent" id="htmlContainer"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: "<p>Hello from v-html</p>"
}
}
};
</script>
<style scoped>
#htmlContainer {
border: dotted black 1px;
width: 200px;
padding: 10px;
}
#htmlContainer > p {
background-color: coral;
padding: 5px;
font-weight: bolder;
width: 150px;
}
</style>
Example 2
Using CSS Modules with <style module>, instead of <style scoped>, the styling is scoped and the styling works for HTML included with v-html.
This problem in the previous example is now fixed.
<template>
<h1>Example</h1>
<p>Scoped styling for HTML included with the 'v-html' directive now works by using CSS Modules with 'style module', instead of 'style scoped'.</p>
<div v-html="htmlContent" :id="$style.htmlContainer"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: "<p>Hello from v-html</p>"
}
}
};
</script>
<style module>
#htmlContainer {
border: dotted black 1px;
width: 200px;
padding: 10px;
}
#htmlContainer > p {
background-color: coral;
padding: 5px;
font-weight: bolder;
width: 150px;
}
</style>
Related Pages
Vue Tutorial: Text Interpolation
