👉🏻 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.
Weekly Vue News #194 Reactive Time Ago View online Hi 👋 I'm on vacation this week, so no special news from my side — just some fresh Vue & Nuxt content for you! Enjoy this issue and have a lovely week ☀️ Vue 📕 Optimizing heavy operations in Vue with Web Worke...
Hey! In yesterday's email I shared what I think is the key feature to making Vue components highly reusable: Scoped slots. But scoped slots are hard to grasp, and even more difficult to master. So today, we're going to make sure we understand them on a deep, intuitive level. Then, I'm going to introduce you to the magic ✨ of scoped slots. The trick is to think of them as functions. Slots are just functions We're going to recreate the functionality of slots, but we'll use a regular Javascript function that only returns HTML. This is the code we'll replicate: <!-- Parent --> < template > < div class = "modal-container" > < div class = "modal" > Content in the Parent < Child class = "mb-4" v-slot = "{ text }" > ...
评论
发表评论