Weekly Vue News #116 - Dynamic Slot Names

Weekly Vue News #116

Dynamic Slot Names

Hi 👋

Nuxt Nation was an amazing event with many exciting announcements and release:

Nuxt 3.8 is out, and it's a big one! Additionally, version 1.0 of Nuxt Image, Nuxt DevTools and Nuxt Security have been released.

In other news, I bought a ticket for Vuejs Amsterdam 2024, and I'm looking forward to meeting you there!

Additionally, I'm working on a big update for CodeSnap.dev which will allow exciting new features. Stay tuned!

Have a lovely week ☀️

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome

Vue

📕 Composables vs. Renderless Components in Vue 3

👉🏻 "Renderless components are typically used to provide some functionality to child components, while composables are used to provide stateful logic to a component or components "

medium.com

📕 Vue show and hide form elements

👉🏻 When working with forms, displaying or concealing various fields is common based on selected options.

👉🏻 This article explains how to conditionally show or hide form elements in @vuejs.

dcblog.dev

📹 Let's create a filter table component in Vue

👉🏻 In this video, you'll learn how to use computed properties, events, fetch requests, and emits to build out a component that acts like a filter and search table with Vue 3 and the Composition API.

www.youtube.com

🛠️ @NativeScrip-Use/Vue

👉🏻 NativeScript-Use/Vue is based on VueUse, it is a collection of utilities for NativeScript-Vue3.

nativescriptuse-vue.netlify.app

Nuxt

📕 Incremental Static Regeneration in Nuxt

👉🏻 This article helps you to understand what are the issues of SSG apps, how you can solve them with ISR, how to achieve ISR in Nuxt and how you can customize the rendering of Nuxt to match your needs.

dev.to

📕 Nuxt 3 Performance Pt 1

👉🏻 In this article, you'll be looking at performance in Nuxt 3 applications and how you can leverage its abilities to boost the performance of your apps.

www.vuemastery.com

📹 Let your anchor tags behave like Nuxt Links

👉🏻 Most of us had to embed HTML from a CMS or an API. But the anchor tags do full-page reloads...

👉🏻 With the help of a custom directive, you can let them behave like NuxtLink components!

www.youtube.com

📅 Events

VueConf Toronto

👉🏻 9 - 10 November 2023, Toronto, Canada

👉🏻 Checkout the full program at http://vuetoronto.com/schedule.

www.vuetoronto.com

Vuejs Amsterdam 2024

👉🏻 28 - 29 February 2024, Amsterdam

vuejs.amsterdam

💬 Quote of the week

🔥 Vue Tip: Dynamic Slot Names

In this Vue tip, I want to show you how to use dynamic slot names in Vue.

This can be useful for scenarios like a multi-step form or a table component.

Let's take a look at how you can dynamically generate slots at runtime:

Child.vue

            1 <script setup lang="ts">
              2 defineProps<{ items: Array<{ id: string; name: string }> }>();
              3 </script>
              4 
              5 <template>
              6   <div v-for="item in items" :key="item.id">
              7     👋
              8     <slot :name="item.name" />
              9   </div>
              10 </template>

In your parent component you can now use the v-slot:[item.name] syntax to dynamically generate a slot name for each item in the items array:

Parent.vue

            1 <script setup lang="ts">
              2 import Child from './components/Child.vue';
              3 
              4 const items: Array<{ id: string; name: string }> = [
              5   { id: 1, name: 'Item 1' },
              6   { id: 2, name: 'Item 2' },
              7 ];
              8 </script>
              9 
              10 <template>
              11   <Child :items="items">
              12     <template v-for="item in items" v-slot:[item.name]>
              13       <p>Hello from {{ item.name }}</p>
              14     </template>
              15   </Child>
              16 </template>

Instead of v-slot:[item.name] you can also use #[item.name] shorthand.

Try it yourself in the following StackBlitz project:

⚡ Open Demo

😂 Fun

🧑🏻‍💻 In Other News

📕 Photoshop is now on the web!

👉🏻 Enabled by WebAssembly and Web Components

👉🏻 The web is now powerful enough to handle the robust image editor, Photoshop.

medium.com

📕 Speeding up the JavaScript ecosystem - The barrel file debacle

👉🏻 Barrel files commonly cause performance issues in JavaScript projects, especially large ones.

👉🏻 Getting rid of barrel files can make many tasks run 60-80% faster.

marvinh.dev

📕 Best Practices for Securing Node.js Applications in Production

👉🏻 Some of the best practices include setting secure HTTP headers, implementing rate limiting, and enforcing strong authentication policies

semaphoreci.com

📕 Long live the Test Pyramid

👉🏻 Check out some contemporary testing strategies and evaluate the famous Test Pyramid's relevance.

www.smashingmagazine.com

📕 Understanding Cookies

👉🏻 An excellent guide about cookies, worth reading.

vercel.com

📹 VS Code Tutorial – Become More Productive

👉🏻 In this free 6 hour long Visual Studio Code course, you will learn how to use built-in features, the best settings/extensions, and workflows to make yourself more productive.

www.youtube.com