v-html Render Raw HTML
Last updated: 2026-10-22
v-html Render Raw HTML
v-html parses a string as HTML and injects it into the element — used for rich text content.
| Group | Directives |
|---|---|
| Kind | Directive |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<div v-html="htmlContent"></div>⚙️ Arguments
| expression | An HTML string (not escaped) |
|---|
Returns：Directive, no return value
▶ Example
Edit the code below and see the live result:
Output：
The page shows bold and italic text — the HTML string is parsed and rendered.💡 Key Points
⚠️ Warning Only use v-html with trusted content: it does not escape, so user input would enable XSS.
⚠️ Warning Directives such as v-bind inside v-html are never compiled and will not work.
💡 Tip For plain text prefer v-text or {{ }}; use v-html only when you truly need HTML markup.
🏷️ Related Directives
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Is v-html a security risk?
A Yes. It does not escape, so user-controlled data enables XSS. Only use it with trusted or sanitized HTML.
Q Why do directives inside v-html not work?
A Injected HTML bypasses the template compiler, so directives like v-bind are ignored. Use render functions or components instead.
Q How do I render rich text safely?
A Sanitize the HTML (e.g. with DOMPurify) before handing it to v-html; prefer v-text when formatting is not needed.
