Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #116 - Dynamic Slot Names #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, 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 which will allow exciting new features. Stay tuned!

Have a lovely week β˜€οΈ

To support me:

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 "
πŸ“• 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.
πŸ“Ή 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.
πŸ› οΈ @NativeScrip-Use/Vue
πŸ‘‰πŸ» NativeScript-Use/Vue is based on VueUse, it is a collection of utilities for NativeScript-Vue3.
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.
πŸ“• 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.
πŸ“Ή 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!
πŸ“… EventsVueConf Toronto
πŸ‘‰πŸ» 9 - 10 November 2023, Toronto, Canada
πŸ‘‰πŸ» Checkout the full program at
Vuejs Amsterdam 2024
πŸ‘‰πŸ» 28 - 29 February 2024, 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:

<script setup lang="ts"> defineProps<{ items: Array<{ id: string; name: string }> }>(); </script> <template> <div v-for="item in items" :key=""> πŸ‘‹ <slot :name="" /> </div> </template>

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

<script setup lang="ts"> import Child from './components/Child.vue'; const items: Array<{ id: string; name: string }> = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, ]; </script> <template> <Child :items="items"> <template v-for="item in items" v-slot:[]> <p>Hello from {{ }}</p> </template> </Child> </template>

Instead of v-slot:[] you can also use #[] 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.
πŸ“• 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.
πŸ“• 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
πŸ“• Long live the Test Pyramid
πŸ‘‰πŸ» Check out some contemporary testing strategies and evaluate the famous Test Pyramid’s relevance.
πŸ“• Understanding Cookies
πŸ‘‰πŸ» An excellent guide about cookies, worth reading.
πŸ“Ή 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.
πŸ› οΈ Viselect
πŸ‘‰πŸ» A Visual DOM-selection library
πŸ‘‰πŸ» Can be used in a vanilla fashion or with integrations for React or Vue.
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Michael ThiessenDan VegaKareem DabbeetAhmed Ragab
Join 2.5K+ other Vue developers
Β© 2023 All rights reserved.