Hey all!
If you missed it, Nuxt Tips Collection is now available, with a 20% discount this week only!
I've also put together an article with a few of my favourite tips:
And of course, I have some tips for you.
Have a great week!
— Michael
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
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 configuremockComponent('MyComponent', {props: {value: String},setup(props) {// ...},});// Or use a separate file to clean things up (and use <script setup>)mockComponent('MyComponent', () => import('./MyComponent.mock.vue'));// ...tests
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>
We can write this:
<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.
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:
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)
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
Here are some upcoming events you might be interested in. Let me know if I've missed any!
The first Czech Vue.js conference, taking place in Cinema City - NovĂ˝ SmĂchov
A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community.
My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing.
"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
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.
Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.
p.s. I also have four products/courses: Clean Components Toolkit, Vue Tips Collection 2, Mastering Nuxt 3, and Reusable Components