Read this on my blog Hey all! Tomorrow is the final session for the Advanced Frontend Testing workshop. This means all of the exercises are done, and my next steps are to take the material, polish it, and turn it into a course. That will take a while — so in the meantime, I'm thinking of offering a condensed single-day version of the workshop. I'll want to do this in the last week of November or first week of December. If you're interested in attending this, reply and let me know which day of the week works best for you. Thursday or Friday? Or maybe you prefer Wednesday to break up your week? That will help me in picking the date! More details on what topics we might cover are here. Have a fantastic week. — Michael 🔥 Creating an If...Else Component Ever thought about making an If...Else component in Vue, despite having v-if, v-else, and v-else-if? Here's a quirky experiment that explores this idea: <If :val="mainCondition"> <template #true>Render if true</template> <Else :if="false">Else if condition</Else> <template #false>Otherwise render this</template> </If>
This setup uses Compound Components, default and named slots, and even render functions to achieve a flexible If...Else logic. The If component checks a condition and decides which slot (true, false, or Else) to render. The Else component — a Compound Component — allows for an else if condition. I have a detailed write up about this component on my blog. Here's a simplified version for a cleaner API: <If :val="condition"> <True>Truth</True> <Else :if="elseCondition">Else slot</Else> <False> What up false branch! </False> </If>
This experiment is a fun way to dive deep into Vue's features like slots, reactivity, and component communication. While it might not replace the built-in directives, it's a great learning exercise and could inspire other creative component designs. Check out the demo and maybe even try implementing your version: Vue If...Else Component Demo Remember — experimenting with "weird" ideas is a fantastic way to deepen your understanding of Vue! 🔥 Where do you put shared state? Let's say we have a Button component that toggles an Accordion open and closed by changing the variable isOpen. But the Button component changes it's text between "Show" and "Hide" based on the same variable, isOpen: // Parent.vue <template> <!-- Both components need access to `isOpen` --> <Button :is-open="isOpen" @click="toggleOpen" /> <Accordion :is-open="isOpen"> Some interesting content in here. </Accordion> </template>
These two sibling components (because they are beside each other) need access to the same state, so where do we put it? Answer: The lowest common ancestor! Which, in this case, is the parent of both components. Because state only flows down through props, shared state must be in a common ancestor. And we also want to keep state as close as possible, so we put it in the lowest common ancestor. While this example may seem obvious to some, it's harder to see that this is the solution when the components sharing state are in separate components, in different folders. Note: we also want to co-locate state with the logic that modifies it, so we have to put the toggleOpen method in the parent. 🔥 Using useRoute The useRoute composable from Vue Router (and included in Nuxt 3) gives us easy access to the current route: const route = useRoute();
In a template we have an injected variable instead: <template> <pre></pre> </template>
This route object comes straight from Vue Router, so it contains everything you'd expect: pathqueryparams- and more
Here are the docs for the route object: https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html 🎙️ #031 — All about VoidZero - The Interview with Evan You As a special DejaVue episode - Alex met up with with the creator of Vue, Vite and founder of VoidZero Evan You himself and discuss his new company and the vision of a unified toolchain. Starting with how the idea of VoidZero came up and finding the right investors went, further discussion revolve around the monetization and why VC money was the way to go instead of other models, such as the sponsorship model of Vue, OpenCore or similar. Also, we cover a lot of community questions, such as whether Next.js will support Vite in the future, what lessons Evan and team learned from other projects like Rome and when we see the first Vite version with Rolldown. Watch on YouTube or listen on your favorite podcast platform. Chapters: In case you missed them: 📜 Mastering Prose Components in Nuxt Content Prose components are perhaps one of the best features of Nuxt Content! In this article, we'll go through a few examples of how you can easily create your own. Check it out here: Mastering Prose Components in Nuxt Content 📜 How to Use Error Handling to Create Rock-Solid Nuxt Apps Error handling is so important to building robust applications. In this article, we'll go over how to use error handling (all of it!) to create rock-solid Nuxt apps. Check it out here: How to Use Error Handling to Create Rock-Solid Nuxt Apps 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! Nuxt Nation 2024 — (November 12, 2024 to November 13, 2024) The biggest Nuxt conference in the world! A free two-day event online. I will speaking on Nuxt Server Components! Check it out here VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024) My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing. I will be speaking on Nuxt Layers! Check it out here Vuejs Amsterdam 2025 — (March 12, 2025 to March 13, 2025) The biggest Vue conference in the world! A two-day event with workshops, speakers from around the world, and socializing. Check it out here 💬 Writing Love Letters "Documentation is a love letter that you write to your future self." — Damian Conway 🧠 Spaced-repetition: toRef default value The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬 Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory. You've been using toRef for a while, but did you know you can also supply a default value? const bank = reactive({ Rand: 3400, Egwene: 20, Matrim: 230340, Padan: -20340, }) // toRef(object, property, default) const myBankAccount = toRef(bank, 'Michael', 1000 * 1000);
| 
评论
发表评论