👉🏻 A Vue 3 component library based on Material Design 2 and 3, supporting mobile and desktop.
💡 Vue Tip: Display Raw HTML
The double mustaches interpret the data as plain text, not HTML.
To output real HTML, you will need to use the v-htmlv-html directive:
1<script setup lang="ts">2const rawHtml = '<span style="color: red">This should be red.</span>';3</script>45<template>6 <p v-html="rawHtml" />7</template>
The contents of the spanspan will be interpreted as plain HTML, and all data bindings are ignored.
Vue is not a string-based templating engine, so we cannot use it to compose template partials with v-htmlv-html. Instead, components are favored as the fundamental unit for UI reuse and repurposing.
Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-htmlv-html on trusted content and never on user-provided content.
If you are looking for a safe replacement for v-htmlv-html, you can use the vue-dompurify-html
👉🏻 This tool automatically cleans up TypeScript code by removing unused exports, deleting modules with no referenced exports, and reporting these changes without making modifications in check mode.
😂 Fun
🔗 Want more Vue & Nuxt content?
More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week.
Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt.
DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it.
Comments? Join the discussion about this issue in our Discord community.
评论
发表评论