Weekly Vue News #168 - Rendering Dynamic Markdown in Nuxt 3+

Weekly Vue News #168 Rendering Dynamic Markdown in Nuxt 3+ View online Hi 👋 Good news — I've recovered from COVID and am back at full speed! I wrote a new article on rendering dynamic Markdown in Nuxt 3, you can find the details below. Enjoy the latest tips and resources in this issue! Have a lovely week ☀️ Vue 📕 Why Use Shadcn Vue? Key Advantages for Your Next Project* 👉🏻 Shadcn Vue is a powerful and highly customizable UI component library built specifically for Vue. 👉🏻 In this article, we'll explore what Shadcn Vue is, its origins, how to integrate it into Vue apps, and most importantly, why it might be the perfect fit for your next project. 📕 Building Recursive components in Vue 👉🏻 Jakub explains how he built a Vue component that would be able to display a nested node tree. 👉🏻 The exact nesting number is unknown, so it had to work recursively. 📹 5 missing Vue.js features 👉🏻 Alex made up his mind about five features which he would love to see available in Vue and how they can help. 🛠️ Spark UI 👉🏻 A collection of beautifully animated Vue components. 👉🏻 Crafted With Vue, TypeScript, Tailwind CSS And VueUse Motion. 👉🏻 Works with Nuxt 3. Nuxt 📕 The Ultimate Guide to Cookies In Nuxt 3* 👉🏻 Cookies are essential for many web applications, and Nuxt 3 provides powerful tools to work with them. 📕 Building our Jamstack site with Laravel, Statamic, and Nuxt SSG 👉🏻 Gearbox launched a new version of their site. 👉🏻 They built it using Jamstack methodologies to be able to deliver the highest performance for their visitors. 📹 8 libraries I use on EVERY Nuxt project 👉🏻 When starting a new Nuxt project, there are so many things to set up - linting, testing, best practices, and more. 👉🏻 In this video, Matt covers his go-to modules that he uses on every Nuxt project. 📹 Server and route middleware 👉🏻 Daniel Roe explains the differences between server and route middleware in a Nuxt project. 💡 Nuxt Tip: Rendering Dynamic Markdown In my current freelance project, I had to render dynamic Markdown content in a Nuxt 3+ application. The Markdown content was written by redactors in a CMS, provided via an API, and needed to be rendered on the client-side. Luckily, Nuxt 3+ provides a solution for rendering Markdown content using the @nuxtjs/mdc@nuxtjs/mdc module. This module allows you to render Markdown content as HTML in your Nuxt 3+ application. You can add it to your project using the following command: 1npx nuxi@latest module add mdc This command will install the @nuxtjs/mdc@nuxtjs/mdc module and add it to the modules section of your nuxt.config.tsnuxt.config.ts file. Now you can use the MDCMDC component to render Markdown content in your Vue components. Here's an example of how you can use it: 1<script setup lang="ts"> 2const md = `# h1 3 4## h2 5 6This is a paragraph 7 8This is a [link](https://mokkapps.de) 9 10::my-button 11Click me 12::` 13</script> 14 15<template> 16 <MDC :value="md" tag="article" /> 17</template> 📗 Read the whole article 📅 Events 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 📕 Inline @scope for CSS 👉🏻 The @scope rule in CSS allows developers to directly attach styles to HTML elements, limiting the scope of the CSS to the children of the targeted DOM node. 🛠️ Player Style 👉🏻 A collection of well-presented, good-looking web component media players. 👉🏻 Lots of customization options and easy copy and paste results too. 🛠️ DMNO 👉🏻 A tool that manages env vars. 👉🏻 It comes with a bunch of quality-of-life stuff (type safety, intellisense). 👉🏻 Blocks accidental leakage of secrets, making sure they don't reach the client. 😂 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