🔥 (#155) A Vue podcast?

How's it going? I was planning to release the update for Reusable Components yesterday, but things haven't gone as planned. Instead, I will be launching it next week. I need a just a bit more time to make sure that the quality is up to my standards. As I've been updating the course and re-writing all the content and step-by-step refactorings, I've also been able to simplify a few things. It's just like refactoring a piece of code, and it's one of the greatest feelings. I also looked at how much content is in there, and it looks like it will be similar to the Clean Components Toolkit. Lots of great content on how to write highly reusable components, simplified and updated — I can't wait to release the update next week! Oh, and one more thing: I'm doing a podcast with Alex Lichter! It's called Deja Vue and we'll be releasing the first episode in the next couple weeks. Check it out here. Vue Tips Collection 2 Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration. Vue Tips Collection is a beautiful book of 118 concise tips, as well as a daily email to get your creative juices flowing. ​Check out Vue Tips Collection​ 🔥 The Right Number of Options for Composables The Options Object Pattern can be really useful, but it can cause trouble if used too much. If you have only a couple options for your composable, it may be simpler to leave it out: import { onMounted, onBeforeUnmount } from 'vue'; export function useEvent(event, handler, target = window) {   // No point in having an options object   onMounted(() => {     target.addEventListener(event, handler);   });   onBeforeUnmount(() => {     target.removeEventListener(event, handler);   }); }; If we need to target a different element, like a button, we can use it like this: import useEvent from '~/composables/useEvent.js'; // Triggers anytime you click the button useEvent(   'click',   () => console.log('You clicked the button!'),   buttonElement ); But, if we want to add more options in the future, we break this usage because we've changed the function signature: before: useEvent(event, handler, target) after:  useEvent(event, handler, options) It's a design choice you'll have to make. Starting with a small options object prevents breaking, but adds a small amount of complexity to your composable. But what if you have lots of options? Since all of the options are optional, the sheer number of options is never really a problem when it comes to using a composable. Further, we can organize the options into sub objects if we really felt the need. With the useEvent composable we can group all the listenerOptions into their own object to help organize things: import { onMounted, onBeforeUnmount } from 'vue'; export function useEvent = (event, handler, options) => {   // Default to targeting the window   const {     target = window,     listener,   } = options;   onMounted(() => {     target.addEventListener(event, handler, listener);   });   onBeforeUnmount(() => {     target.removeEventListener(event, handler, listener);   }); }; The usage now becomes this: import useEvent from '~/composables/useEvent.js'; // Triggers only the first time you click in the window useEvent(   'click',   () => console.log('First time clicking the window!'),   {     listener: {       once: true,     }   } ); 🔥 How to get rid of extra template tags Scoped slots are lots of fun, but you have to use a lot of template tags to use them. Luckily, a shorthand lets us get rid of it, but only if we're using a single scoped slot. Instead of writing this: <DataTable>   <template #header="tableAttributes">     <TableHeader v-bind="tableAttributes" />   </template> </DataTable> We can write this: <DataTable #header="tableAttributes">   <TableHeader v-bind="tableAttributes" /> </DataTable> Simple, straightforward, and marvellous. (Ok, maybe not quite marvellous, but still pretty good) I actually have a whole course on writing cleaner Vue code like this. 🔥 Default Content with Nested Slots If you have multiple levels of nested slots, it's possible to have defaults at each level: <!-- Parent.vue --> <template>   <Child>     <slot>       We're in the Parent!     </slot>   </Child> </template> <!-- Child.vue --> <template>   <div>     <slot>       We're in the Child!     </slot>   </div> </template> The slot content provided at the highest point in the hierarchy will override everything below it. If we render Parent, it will always display We're in the Parent. But if we render just the Child component, we get We're in the Child!. And if the component rendering the Parent component provides slot content, that will take precedence over everything: <!-- Grandparent.vue --> <template>   <Parent>     Haha this content rules them all!   </Parent> </template> 📜 Controlled Props Pattern Have you ever had a component where you needed to override its internal state? For example, you have an accordion that keeps track of its own open state internally. But there are a few instances where you want to be able to override that internal state and force it open from the parent component. This is a tricky but pretty common scenario. Check it out here: Controlled Props Pattern 💬 It always takes longer "It always takes longer than you expect, even when you take into account Hofstadter's Law." — Hofstadter's Law 🧠 Spaced-repetition: Using useRequestHeader 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. Grabbing a single header from the request couldn't be easier in Nuxt: const contentType = useRequestHeader('content-type'); This is super handy in middleware and server routes for checking authentication or any number of things. If you're in the browser though, it will return undefined. This is an abstraction of useRequestHeaders, since there are a lot of times where you need just one header. See the docs for more info. p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components ​

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8