* 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
Yeah, i'm working on a crash course that will also be apart of the Nuxt 3 course coming out early next year which will feature a full-stack application
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.
Yep, you can also do this as well! 🤙 As I mentioned, only covered some of the more common use cases, but this is definitely something some could take advantage of!
This is fantastic. I arrived at this video after running into an issue where i was using watch to rerun the useFetch but was getting warnings in the dev tools about "component already mounted, use $fetch instead". This video has given me some ideas to try, thank you.
Awesome style of teaching the intricacies. No doubt the docs say it all but talking through with demonstration to the rationales really helped. Thanks!
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.
Although John did mix up the lazy property values, it does not seem to make a difference actually. I played around with this and regardless of lazy: false or lazy: true, if you remove await and use pending to show a loading state then once that is done it show the data it works the same. 🤷
I use vue-query (similar to react-query or other people say tanstack-query) to do data fetching so I can use advanced features from tanstack-query... So what do I need ? $fetch or useAsyncData ? I'm confused because it always throws a warning when using useFetch as queryFn or mutateFn 😅
You aren't going to regret embracing Nuxt/Vue ecosystem. Is so consistent, elegant, fast, solid, very UX, always taking community requested features into consideration and implementing them fast, check out what powers Nuxt, the unjs ecosystem. And the devtools? Chef kiss. 🔥💚
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?
Although SSR can output HTML directly, the first screen appears later because the API is requested on the server side. Am I right? Of course, if there is no API request, the first screen content can be seen relatively quickly; So 90% of the time, SSR is not needed, unless it is for SEO
what's the different between fetching the data from the server & client side? is it mean the request wouldn't be appear on the request network or what?
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)
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?
So within my pages/index.vue I would do something like const { data } = await useAsyncData('toDos', () => { const { toDos } = useTodos() return toDos }) ? @@JohnKomarnicki
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?
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. :(
Ok, I just realized what was happening. My intention is to use Nuxt as an SPA, I don’t want to use any SSR because my backend is a separate app. I was misunderstanding Nuxt, and therefore had it misconfigured… I just added ssr: false to the configuration, and everything is working as expected
* 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!
Yeah I am just writing this in comment, then found your comment 😊
You were so persistent with lazy:false, at some point I just accepted that I was insane and know nothing 😂
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
Yeah, i'm working on a crash course that will also be apart of the Nuxt 3 course coming out early next year which will feature a full-stack application
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.
Yep, you can also do this as well! 🤙
As I mentioned, only covered some of the more common use cases, but this is definitely something some could take advantage of!
This is fantastic. I arrived at this video after running into an issue where i was using watch to rerun the useFetch but was getting warnings in the dev tools about "component already mounted, use $fetch instead". This video has given me some ideas to try, thank you.
I love Nuxt! More Nuxt content please 😊
Awesome style of teaching the intricacies. No doubt the docs say it all but talking through with demonstration to the rationales really helped. Thanks!
I appreciate that, glad to hear this was helpful!
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.
Good catch. Yes I definitely mixed up the what the default value was lol. Thanks for pointing this out.
Although John did mix up the lazy property values, it does not seem to make a difference actually.
I played around with this and regardless of lazy: false or lazy: true, if you remove await and use pending to show a loading state then once that is done it show the data it works the same. 🤷
@@smartvideos2709 Yeah, it's a bit confusing.
Was very confused with all fetching thing but your video made paved the way. 🎉
I’m glad to hear!
Best series ever. I actually had hard time finding this kind of video. Keep it up ❤
I use vue-query (similar to react-query or other people say tanstack-query) to do data fetching so I can use advanced features from tanstack-query... So what do I need ? $fetch or useAsyncData ? I'm confused because it always throws a warning when using useFetch as queryFn or mutateFn 😅
Last night I got disappointed with next js update its time to learn nuxt again.
The Vue ecosystem is just far better for developer experience in my opinion
Why??
You aren't going to regret embracing Nuxt/Vue ecosystem. Is so consistent, elegant, fast, solid, very UX, always taking community requested features into consideration and implementing them fast, check out what powers Nuxt, the unjs ecosystem. And the devtools? Chef kiss. 🔥💚
Tried Nextjs, Remix, Sveltekit and even tried Astro for full stack development. Vuejs with Nuxt is the best overall in terms of ecosystem and DX
@@AIZEN155why not
Could you show an example of useFetch wrapper where token from localstorage is set already, 401 error handled with refreshToken
Great video. Would you be able to add details on how certain fields should refetch data based on those fields?
I'm not good at English, but I still understand what you're saying. Good lecture!
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?
Thanks for this explanation! Best I've seen so far from the confusing area of Nuxt :)
I’m glad you found it helpful!
Thanks Brother for the Explaination 🎉❤
This is a really great overview thanks for putting this together
Great video!
I am still wondering what the best setup is using Pinia
Although SSR can output HTML directly, the first screen appears later because the API is requested on the server side. Am I right?
Of course, if there is no API request, the first screen content can be seen relatively quickly;
So 90% of the time, SSR is not needed, unless it is for SEO
what's the different between fetching the data from the server & client side? is it mean the request wouldn't be appear on the request network or what?
Thanks! Curiosity, how to handle cors on local development
Thanks for your content, its helping me so much ❤
Happy to help!
What a great video. Many thanks.
What is the difference between using the buil-in function "usefetch" and using useQuery from tanstack vue-query?
I have a question if we use pick on our call function is that essentially what Graphql tries to implement?
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)
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.
Is there any use you can recommend for the cms panel
When to use optimistic updates vs mutating the data directly in the server ?
Great explaination love your video!
please aslo do state management on nuxt component.
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?
If you’re using a composbale you should still be able to wrap it in useAsyncData I’m pretty certain
So within my pages/index.vue I would do something like const { data } = await useAsyncData('toDos', () => {
const { toDos } = useTodos()
return toDos
}) ? @@JohnKomarnicki
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?
Thanks for the video & the effort,
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.
sir thnx a lot, very nicely explained, i m new to nuxt
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. :(
Great explanation
Nice 👍🏻
For some reason I don't get the response data parse into `JSON`. I failed to understand why
Ok, I just realized what was happening. My intention is to use Nuxt as an SPA, I don’t want to use any SSR because my backend is a separate app. I was misunderstanding Nuxt, and therefore had it misconfigured… I just added ssr: false to the configuration, and everything is working as expected
I'm trying to use NuxtLoadingIndicator the same way but it seems not working?
I’ve noticed an issue with this in the latest version myself.
Very nice video
how to post delete put method?
This section of the docs should explain that! nuxt.com/docs/api/utils/dollarfetch
Thanks for the great video! 👍
I appreciate it!
(Was a bit frustrated that I mixed up the lazy loading default value property 🤦 Hopefully it was still helpful!)