Weekly Vue News #131 - Passing Slots to Child Components

Weekly Vue News #131 Passing Slots to Child Components View online Hi 👋 I did some open-source work and contributed to the VueEmail project and added line highlighting and line numbers to the code block component. You can the result in the code blocks included in this issue. In other news, I redesigned GitHub Traffic Viewer using Nuxt UI Pro. Finally, some good news: In a few weeks, Vuejs Amsterdam 2024 will take place and I'm looking forward to meeting you there! Have a nice week ☀️ VueEmail: The next generation of writing emails ⭐ A collection of high-quality, unstyled components for creating beautiful emails using Vue and TypeScript. ⭐ I use it for this newsletter and I absolutely love it. 👉🏻 Support the project and star the repository Vue 📕 Controlled Props Pattern 👉🏻 Have you ever had a component where you needed to override its internal state? 👉🏻 Michael's "Controlled Props Pattern" is designed for exactly this situation. 📕 Data Fetching in Vue 3 👉🏻 Data fetching optimization is key for a performant web application. 👉🏻 Vue helps by offering many different lifecycle hooks, but finding the best one for each specific type of call is not straightforward. 📹 Vue's New Rendering Strategy (Vapor), Innovation vs Maintenance 👉🏻 Lachlan talk sabout Vue's new rendering stategy, Vapor mode, performance, and more broadly the implications of innovation vs maintenance in the JS community. 📹 Organize your Composition API code 👉🏻 Alexander points out common mistakes when organizing code and an easy way to avoid spaghetti code in Vue components with a bit more functionality. Nuxt 🥳 Nuxt 3.10 is out 👉🏻 Experimental shared asyncData when prerendering 👉🏻 SSR-safe accessible unique ID creation 👉🏻 Detecting anti-patterns 👉🏻 and more... 📕 7 New Features in Nuxt 3.9 👉🏻 Bringing Vite 5 and Rollup 4 support, interactive server components, new composables, a new loading API and more, there are a lot of new features packed into this release. 📕 Understanding useState in Nuxt 3 👉🏻 Michael Thiessen explains what useState is for and why it's useful to us. 📹 Get Started With Nuxt's Runtime Config API 👉🏻 Learn all the basics about the Nuxt runtime config api. 📅 Events Vuejs Amsterdam 2024 👉🏻 28 - 29 February 2024, Amsterdam Vueconf US 2024 👉🏻 22 - 24 May 2024, New Orleans, US 💬 Quote of the week 🔥 Vue Tip: Passing Slots to Child Components In certain scenarios, you want to pass on all slots from a parent component to the child component. This is especially useful when creating a wrapper component that adds some functionality to the child component. In this article, let's assume we have a Child.vueChild.vue component with two named slots, toptop and bottombottom : 1<template> 2 <div> 3 <h2>Child</h2> 4 <slot name="top" /> 5 <slot name="bottom" /> 6 </div> 7</template> Child.vueChild.vue is wrapped by the Parent.vueParent.vue component that should pass all slots to its child component. First, let's see how the named slots are filled in the App.vueApp.vue component: 1<template> 2 <Parent> 3 <template #top> 4 <span>Top</span> 5 </template> 6 <template #bottom> 7 <span>Bottom</span> 8 </template> 9 </Parent> 10</template> Finally, let's see how the Parent.vueParent.vue component passes all slots to its child component: 1<template> 2 <div> 3 <h1>Parent</h1> 4 <Child> 5 <template v-for="(_, slotName) in $slots" #[slotName]> 6 <slot :name="slotName" /> 7 </template> 8 </Child> 9 </div> 10</template> We iterate over the $slots$slots object and render a slotslot element for each slot. The slotslot element has a :name:name attribute that is bound to the slotNameslotName variable. 😂 Fun 🧑🏻‍💻 In Other News 📕 What PWA Can Do Today 👉🏻 A showcase of what is possible with Progressive Web Apps today. 📕 console.delight 👉🏻 Did you know you could render (limited) CSS, SVGs, and even HTML in "console.log()"? 📕 ServerFree Architecture 👉🏻 It can be implemented using SQLite compiled to WebAssembly for database operations, running backend code in a Web Worker, and using a Service Worker to intercept requests and communicate with the Web Worker. 📹 Our Extension Picks for UI Developers 👉🏻 Raycast shares some hidden-gem extension picks for front-end developers. 🛠️ Heat.js 👉🏻 It has no dependencies, and is small, responsive, and themeable. Comments? Join the discussion about this issue here. Until next week, Michael Hoffmann (Curator) Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany