You're Probably Using Nuxt Wrong

I just use await useFetch without lazy: true and use the loading bar at the top like most websites do 😶

very fast transition screen and is it possible to slow down your narration

Thanks for the video, it's so clarifying! I just want to point out that the Nuxt Team already realized that the `lazy: true` is the best option, and in fact they provide a `useLazyFetch` composable that is exactly syntactic sugar for that purpose.

Mh .. still not clear to me, do we need to add the await or not?

I have been using $fetch exclusively in cases when fetching is triggered by user actions, inside functions. But can we avoid using $fetch altogether by passing proper options to useFetch?

Great video, it explains a lot!

I’m still confused. Does “await” matter?

Hi, how about using, useFetch without await and lazy like this: useLazyFetch ?

👍

thank you for explaining this

Ok. Now the same but with some real dummy-app example not just abstractive theory pls! It's much easier to understand the abstraction if you have some peaches and apples to visualise those technical aspects :)

bit salty you just posted this, i kind of spent the last week coming to the same conclusion 😶😶

Need more Vuejs and Nuxtjs content 💚

worst thing about nuxt is the lack of documentation, so you get into situations like this where you have to read through the source code to understand what these functions do

the pending ref is deprecated ;) best to use status

great video
i was confused about this for a while
now i understand it

THANK YOU! KEEP GOING!

the most confusing topic in Nuxt, finally well explained. thanks

Thank you for the explanation.

Nuxt2 was easier to understand in that matter, I think.

You either used fetch() (and $fetchState.pending etc) for data fetch which doesn't block client navigation (and you have to assign the value to your data via this.datavar = yourfetchvalue) , or asyncData() for navigation blocking (and you directly return the data you want that will be used in the template, without need to assign to a data). As far as I remember, that was it.

Now in 3 is confusing by having useFetch, useAsyncData, $fetch.. which in the end is all the same method, but it doesn't block because you can give lazy true.

Yeah that's the sort of things about nuxt I really dislike. I used Remix for a while and the data fetching model there is so much easier to understand imo. Also, maybe it's a skill issue but I've not been able to keep my nuxt pages type safe when using useAsyncData + throw createError(404) utils. Afaik that's a vue limitation but type narrowing not being propagated from script to template is annoying as hell.

Timely video! Currently migrating a project from Vue2 to Nuxt3 and I did struggle to know which composable to use where.

Thanks for an easy explanation of such a complex topic. Always love this clean demonstrating videos! ✨

great content! 10x matt .

Hi, on a side note, does using server:false mean it wont get rendered on the server hence no SEO ? because for me what I do now is if I want the content data to NOT BE "SEOABLE", I'll set server:false, else I'll just use default. Not sure if this is the right concept.

This feels so weird, because if you await a component the parent should be Suspend. So this is kinda a "hack"?

Why did Nuxt not let the user use "normal" onServerPrefetch" hook?

We should keep it simple, simplicity makes working with a framework nice.

Nuxt is flexible. But damn! it's not always obvious to know which tool to use and when :/

Is there also any trick when you need to pass authorization header for example? what would be the best solution in that case? do we create our own instance of useFetch, is it possible to set some global header somewhere in the config? What do you recommend?

Typical example when you have to login and then get some items.

I'm still confused. I definitely have to watch this video more than once. Thank you.

butter smooth explanation 🤩

This explains a lot for me, thank you

Love this, thanks for the explanation!

WE'RE SO BACK BABY