Data Fetching With Nuxt 3 

* One mistake i made is explaining lazy:false removes the default loading behavior🤦.It should actually be set to lazy:true if you want to handle your own custom loading state as we are doing throughout this video Thanks @Thr0nSK for pointing this out!

That's why I love Nuxt 3. Want to see more content on Nuxt 3. Like designing a proper application with backend. If possible do proper CRUD in Nuxt 3. Thank you

Best series ever. I actually had hard time finding this kind of video. Keep it up ❤

Was very confused with all fetching thing but your video made paved the way. 🎉

From the docs: For finer control, the variable can be: - idle when the fetch hasn't started - pending when a fetch has started but not yet completed - error when the fetch fails - success when the fetch is completed successfully 🔥👏 Nice content mate! I'm sub. Keep up the good work.

This is a really great overview thanks for putting this together

Thanks for this explanation! Best I've seen so far from the confusing area of Nuxt :)

I love Nuxt! More Nuxt content please 😊

Thanks for your content, its helping me so much ❤

What a great video. Many thanks.

Thanks for the video & the effort,

Awesome style of teaching the intricacies. No doubt the docs say it all but talking through with demonstration to the rationales really helped. Thanks!

Great video. Would you be able to add details on how certain fields should refetch data based on those fields?

Great explaination love your video! please aslo do state management on nuxt component.

sir thnx a lot, very nicely explained, i m new to nuxt

Great video! I am still wondering what the best setup is using Pinia

The lazy: false is actually wrong. You should be using lazy: true. You said that the useLazyFetch is equivalent to useFetch with lazy set to false - but it’s the exact oposite. False is actually the default value for useFetch… The reason why you page didn’t wait for the promise to resolve is that you removed the await keyword.

Last night I got disappointed with next js update its time to learn nuxt again.

What about doing the fetching and handling in a composable? Is that recommended? I like to keep my page code clean. Also should we using he serve api to do the external fetch?

I'm not good at English, but I still understand what you're saying. Good lecture!

Nice 👍🏻

Could you show an example of useFetch wrapper where token from localstorage is set already, 401 error handled with refreshToken

When to use optimistic updates vs mutating the data directly in the server ?

still haven't found the optimal solution for a "Load more" button (without using a third variable, because you need to concat previous results with new results)

Very nice video

I have a question if we use pick on our call function is that essentially what Graphql tries to implement?

Hey. How can I get filtered products from fakestore api? For example, I want to get products only from two categories. Should I use useFetch with query parms?

What is the difference between using the buil-in function "usefetch" and using useQuery from tanstack vue-query?

Thanks for the video. I have some questions, and I hope to create a video to explain them. __ 1. When using lazy fetching If I want to display a skeleton instead? Can I create productsList and handle this with suspense or what is the best practice for this. 2. What if I want to add Authorization header for every request to check if the user login. What is the best way, and is there a way to create instance with interceptors for them ($fetch, useFetch,...) 3. What is the best way to store the access token, and how to handle refresh token? Please create video for authentication in nuxt and explain this.

You showed that it blocks the navigation when fetching data (which is exactly what I want), however, I'm using composables. So for example, lets say I have a list of to dos, which are being fetched within a composable. It fetches the data through the supabase nuxt module. In my page/component I want to do this: const { toDos } = useTodos() which works fine. But how do I achieve that the page load should get blocked since fetching data is being handled within the composable?

I get an error saying "Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')" when I try clicking nuxt link multiple times, I have top level await to the page I want to go to and set lazy to false in useFetch.

useFetch doesn't work on server in my project! It works only when I make routing but if I reload page smth went wrong. I can't solve this problem in nuxt 3. :(

I'm trying to use NuxtLoadingIndicator the same way but it seems not working?

how to post delete put method?

Thanks for the great video! 👍