Read this on my blog Hello, I hope you're enjoying October! This weekend I enjoyed time with family over Canadian Thanksgiving 🇨🇦. The second day of Advanced Frontend Testing in Vue is happening Thursday, and I'm excited for this one. I incorporated a lot of feedback from the first day, and I think it's going to be a great workshop. I can't wait to put this material together into the course for you all — I think there's a huge need for this testing content, and I'm excited to share it with you. In the meantime, I've got some tips, a new podcast episode, and some links for you. — Michael 🔥 Extract Conditional Pattern This is one of my favourite tools from the Clean Components Toolkit. It's super easy to implement, and can be applied in so many situations to clean up your code fairly quickly. We can apply this in almost any place we have a v-if in our component. When we extract each branch body we go from this: <div v-if="condition"> <div> <!-- Lots of code here --> </div> </div> <div v-else> <div> <!-- Lots of other code --> </div> </div>
<div v-if="condition"> <NewComponent /> </div> <div v-else> <OtherComponent /> </div>
We know we can do this for two reasons: - Each branch is semantically related
- Each branch does distinct work
We know that each branch is semantically related, meaning all of that code works together to perform the same task. Each branch also does distinct work — otherwise, why have a v-if at all? This means it's a perfect opportunity to create new components. And by replacing a large chunk of code with a well-named component that represents the code's intent, we make our code much more self-documenting. However, this pattern doesn't always work well. If we have a lot of branches we may want to switch to using the Strategy Pattern, another tool included in the Clean Components Toolkit. 🔥 Refresh a Page in Vue If you need to force a reload your entire page using Vue, all you need is some Javascript: window.location.reload();
But this is a code smell — you should almost never need to use this method. Instead, a better solution might be one of these: - Create a method to reset and initialize state instead of relying on
onMounted hooks or the top-level of setup. You can also create an initialize action for Pinia. - Make sure your important state is reactive. This tends to fix a lot of common issues.
- Key-changing — by changing just the
key attribute on a specific component, you can force just one component to reload instead of your entire app. Still a bit of a hack, but it gets the job done. 🔥 Nuxt Plugin Dependencies When writing plugins for Nuxt, you can specify dependencies: export default defineNuxtPlugin({ name: 'my-sick-plugin-that-will-change-the-world', dependsOn: ['another-plugin'] async setup (nuxtApp) { // The setup is only run once `another-plugin` has been initialized } })
But why do we need this? Normally, plugins are initialized sequentially — based on the order they are in the filesystem: plugins/ - 01.firstPlugin.ts // Use numbers to force non-alphabetical order - 02.anotherPlugin.ts - thirdPlugin.ts
But we can also have them loaded in parallel, which speeds things up if they don't depend on each other: export default defineNuxtPlugin({ name: 'my-parallel-plugin', parallel: true, async setup (nuxtApp) { // Runs completely independently of all other plugins } })
However, sometimes we have other plugins that depend on these parallel plugins. By using the dependsOn key, we can let Nuxt know which plugins we need to wait for, even if they're being run in parallel: export default defineNuxtPlugin({ name: 'my-sick-plugin-that-will-change-the-world', dependsOn: ['my-parallel-plugin'] async setup (nuxtApp) { // Will wait for `my-parallel-plugin` to finish before initializing } })
Although useful, you don't actually need this feature (probably). Pooya Parsa has said this: I wouldn't personally use this kind of hard dependency graph in plugins. Hooks are much more flexible in terms of dependency definition and pretty sure every situation is solvable with correct patterns. Saying I see it as mainly an "escape hatch" for authors looks good addition considering historically it was always a requested feature. 🎙️ #029 — Inertia.js (with Joe Tannenbaum) Vue.js can be used in many different ways — with a meta framework, as a plain SPA, via the script tag and also with Inertia! Created in the Laravel ecosystem with adapters for various back-end front-end frameworks, Alex and Michael got a special guest on the episode who couldn't fit better to illustrate what Inertia is capable of. Joe Tannenbaum, Software Engineer at Laravel and Inertia contributor goes all in-depth on the capabilities of the library, as well as sweet features and changes coming up for the future Inertia v2 release. Looking for an easy way to write applications? After this episode, you might have found it. Enjoy the episode! Watch on YouTube or listen on your favorite podcast platform. Chapters: In case you missed them: 📜 Quickly Build Fullstack Vue Apps with Directus Directus is a powerful headless CMS that can be used to quickly build fullstack Vue apps. In this article, we'll go over how I used Directus and Nuxt to build a survey app — all without writing a single line of backend code. Check it out here: Quickly Build Fullstack Vue Apps with Directus 📜 Async and Sync: How useAsyncData Does It All Have you ever noticed that useAsyncData can be used both sync and async? What's up with that? In this article, I explain how it works, and how you can use this pattern to your advantage. Check it out here: Async and Sync: How useAsyncData Does It All 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! Vue Fes Japan 2024 — (October 19, 2024) Check it out here Nuxt Nation 2024 — (November 12, 2024 to November 13, 2024) The biggest Nuxt conference in the world! A free two-day event online. 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. 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 💬 Repeated failure "As a rule, software systems do not work well until they have been used, and have failed repeatedly, in real applications." — Dave Parnas 🧠 Spaced-repetition: Default Content with Slots 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 can provide fallback content for a slot, in case no content is provided: <!-- Child.vue --> <template> <div> <slot> Hey! You forgot to put something in the slot! </slot> </div> </template>
This content can be anything, even a whole complex component that provides default behaviour: <!-- Child.vue --> <template> <div> <slot name="search"> <!-- Can be overridden with more advanced functionality --> <BasicSearchFunctionality /> </slot> </div> </template>
| 
评论
发表评论