#title Weekly Vue News #116 - Dynamic Slot Names #preview Ready for your weekly Vue & Nuxt dose?
Dynamic Slot Names
Hi 👋
Nuxt Nation was an amazing event with many exciting announcements and release:
In other news, I bought a ticket for
Additionally, I'm working on a big update for
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
| 👉🏻 "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 " |
| 👉🏻 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. |
| 👉🏻 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. |
| 👉🏻 NativeScript-Use/Vue is based on VueUse, it is a collection of utilities for NativeScript-Vue3. |
| 👉🏻 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. |
| 👉🏻 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. |
| 👉🏻 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! |
| 👉🏻 9 - 10 November 2023, Toronto, Canada |
| 👉🏻 Checkout the full program at |
| 👉🏻 28 - 29 February 2024, Amsterdam |
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
Let's take a look at how you can dynamically generate slots at runtime:
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:
Instead of v-slot:[item.name] you can also use #[item.name] shorthand.
Try it yourself in the following StackBlitz project:
| 👉🏻 Enabled by WebAssembly and Web Components |
| 👉🏻 The web is now powerful enough to handle the robust image editor, Photoshop. |
| 👉🏻 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. |
| 👉🏻 Some of the best practices include setting secure HTTP headers, implementing rate limiting, and enforcing strong authentication policies |
| 👉🏻 Check out some contemporary testing strategies and evaluate the famous Test Pyramid’s relevance. |
| 👉🏻 An excellent guide about cookies, worth reading. |
| 👉🏻 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. |
| 👉🏻 A Visual DOM-selection library |
| 👉🏻 Can be used in a vanilla fashion or with integrations for React or Vue. |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
