Hey all! If you missed it, Nuxt Tips Collection is now available, with a 20% discount this week only! Get Nuxt Tips Collection now I've also put together an article with a few of my favourite tips: 21 Nuxt Tips You Need to Know And of course, I have some tips for you. Have a great week! — Michael 🔥 Mock Any Import in Nuxt One handy helper method in @nuxt/test-utils is mockNuxtImport. It's a convenience method to make it easier to mock anything that Nuxt would normally auto-import: import { mockNuxtImport } from '@nuxt/test-utils/runtime'; mockNuxtImport('useAsyncData', () => { return () => { return { data: 'Mocked data' }; }; }); // ...tests
🔥 Mock Nuxt Components When Testing When testing, you'll often need to shallow render a component — mocking out any descendent components to keep your test simpler. With @nuxt/test-utils you can use the mockComponent utility method to help with that: import { mockComponent } from '@nuxt/test-utils/runtime'; // Use Options API to configure mockComponent('MyComponent', { props: { value: String }, setup(props) { // ... }, }); // Or use a separate file to clean things up mockComponent('MyComponent', () => import('./MyComponent.mock.vue')); // ...tests
🔥 Shorthand for named slots Named slots also have a shorthand syntax, one that's much nicer to look at. Instead of writing this: <DataTable> <template v-slot:header> <TableHeader /> </template> </DataTable>
<DataTable> <template #header> <TableHeader /> </template> </DataTable>
Not a huge difference, but a little cleaner for sure. I think the # character is easier to pick out than v-slot when reading code. 🎙️ #019 — Nuxt Tips You Have To Know Are you using Nuxt and want to hear some insights you weren't aware of? Perfect! Then this DejaVue podcast episode is what you need. Michael and Alex are going through more than five big tips around Nuxt, from features under the radar over to a big chunk of amazing benefits and why they exist, all from Michael's Nuxt Tips Collection! Enjoy the episode! Watch on YouTube or listen on your favourite podcast platform. Chapters: In case you missed them: 📜 Coding Better Composables: Options Object (1/5) I teamed up with Vue Mastery to create this series on coding better composables. In this series we cover five different patterns. For each, we show how you can implement it and then we see it in action with a composable from VueUse. This first article is on using an options object to easily configure the behaviour of your composable. Check it out here: Coding Better Composables: Options Object (1/5) 📜 Better Navigation with NuxtLink The NuxtLink component may seem simple at first glance, but there's a lot going on beneath the surface. It's one of the easiest Nuxt 3 components to use, while giving our apps a big performance boost. In this article we see some things about NuxtLink you may not have known. Check it out here: Better Navigation with NuxtLink 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! PragVue 2024 — (September 17, 2024) The first Czech Vue.js conference, taking place in Cinema City - Nový Smíchov Check it out here Vuejs.de Conf — (October 8, 2024 to October 9, 2024) A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community. Check it out here Vue Fes Japan 2024 — (October 19, 2024) 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 💬 Indirection "Any problem in computer science can be solved with another layer of indirection, except of course for the problem of too many indirections." — Bjarne Stroustrup 🧠 Spaced-repetition: When should you use v-if? 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. Instead of using v-if, it's sometimes more performant to use v-show instead: <ComplicatedChart v-show="chartEnabled" />
When v-if is toggled on and off, it will create and destroy the element completely. Instead, v-show will create the element and leave it there, hiding it by setting its style to display: none. Doing this can be much more efficient if the component you're toggling is expensive to render. On the flip side, if you don't need that expensive component immediately, use v-if so that it will skip rendering it and load the page just a bit faster. 🔗 Want more Vue and Nuxt links? Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links. Sign up for it here.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components | 
评论
发表评论