Weekly Vue News #166 - Display Raw HTML

Weekly Vue News #166 Display Raw HTML View online Hi 👋 This week is the vuejs.de conference in Bonn, Germany, and I wish all attendees a wonderful time in Germany and interesting talks and discussions. Unfortunately, I cannot attend this year but hopefully next year. Have a lovely week ☀️ Vue 📕 The Simplest Method to Create a Vue.js Component Library (with UnJS and TypeScript) 👉🏻 In this article, you'll learn how to publish a Vue.js component library to npm. 📕 Vue Language Tools: Volar, TypeScript, and the Official VSCode Extension* 👉🏻 This article takes a deep dive into the various packages found within the Vue Language Tools repository. 📹 One Line Transitions in Vue.js with the AutoAnimate Plugin 👉🏻 In this tutorial, you'll discover how to add smooth transitions effortlessly to your Vue.js app using the powerful v-auto-animate directive. 🛠️ Vue Transition with Tailwind CSS 👉🏻 Copy and paste snippets to build beautiful transitions with Tailwind. 👉🏻 Snippets are available for appear, transition between, lists and modals. 🛠️ Varlet 👉🏻 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> 4 5<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 Nuxt 📅 Nuxt Certification Launch Date Announced* 👉🏻 The official launch date for the Nuxt Certification exam is October 15, 2024 👉🏻 This is your chance to validate your Nuxt expertise and join the ranks of certified professionals. 📕 21 Nuxt Tips You Need to Know 👉🏻 Michael Thiessen shares 21 tips from his "Nuxt Tips Collection" book in this article. 📕 5 cool things you can do with Nuxt* 👉🏻 Nuxt is a powerhouse framework that takes Vue.js development to the next level. 👉🏻 This article dives into 5 features that will transform your workflow and impress your colleagues. 📹 Loading Third-Party Assets with Nuxt Scripts 👉🏻 Nuxt Scripts lets you load third-party scripts for better performance, privacy, security and DX. 👉🏻 It includes many popular third-parties out of the box. 🛠️ Nuxt Swiper 👉🏻 Fully featured Swiper.js module for Nuxt 3. 👉🏻 Featuring hardware-accelerated transitions & smooth, native-like interactions. 📅 Events vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) Nuxt Nation (12 - 13 November 2024, Virtual Conference) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands) 💬 Quote of the week 🧑🏻‍💻 In Other News 🖊️ Oracle, it's time to free JavaScript. 👉🏻 This is the latest serious effort to "free" the term JavaScript from its trademark at Oracle. 📕 2024: 0.5% of the global top 200 websites use valid HTML 👉🏻 HTML conformance data for 2024 are in. 👉🏻 Let's unpack the good and not-so-good news. 📕 Why GitHub Actually Won 👉🏻 Scott Chacon, co-founder of GitHub, explains why GitHub became the dominant code hosting platform. 👉🏻 He attributes it to two key factors: timing and taste. 🛠️ ts-remove-unused 👉🏻 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. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome * Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter. Unsubscribe Holzapfelkreuther Str. 19, 81375 Munich, Germany