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
@@najlepszyinformatyk1661 makes you think they intentionally do bad docs... so they can sell their courses and certificate wich seems a thing now.... i think everyone would laugh in Estonia.. i would t try to get hired saying i have a "nuxt certificate" , would be seen as stupid tax.
The deeper you get into open-source libraries, the more you realize every library has this issue. Learning to read source and auto-generated documentation is key to mastering these tools.
Nuxt 2 gave me a horrible impression of Nuxt, so horrendous I just don't touch Nuxt nowadays. There was no human readable documentation, no typing, too much forced magical globals, string to symbol magic (even into global symbols), no proper informative errors, impossible migration/updates, very slow development of Nuxt 3 and the bridging methods, errors happening from absolutely nothing for zero reasons (that are non-documented and impossible to track down), very slow hot module replacement and a whole lot of other things that made me lose so much sleep and gave me gray hair. Just think about it: forced global variables, that have absolutely zero typing/type-hinting. Never fails to be a ground for eventual impossible to track down runtime errors. Forcing you into re-typing everything manually via .d.ts into global scope. Again, unmaintainable, unreliable and evil, because human factor. At least they have typing now
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! ✨
Sorry but It's still doesn't clear to me, if its client side fetching then I think await is not needed, and it wont block navigation when its client side
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.
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.
it won't render on the server, but tbh it's still unclear if/how/when Google renders JS client-side. If you want to be sure it won't be indexed, useSeoMeta is probably your best bet
It is "probably" still indexed by Google *but* SEO would be better when rendering it on the server. Not even starting to talk about OG tags which aren't available otherwise (if they rely on the data)
I'd say I got it -ish. I still don't understand what behavior exactly is impacted whether or not we await useAsyncData/useFetch. Could you elaborate more on that?
They used to create repositories with axios, now I just make a service class which every method is a composable "useFetch"-like which in turn uses a custom plugin that auths to my api and has the base url read from .env So no axios here
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?
thanks for this great video, it will be much better if u provide some examples and code with pinia and ssr cuz still i am confusing how to use pinia and requests on ssr
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 follow the example in the documentation - "Use Custom Fetch Composable" - it's basically a wrapper around the use fetch with default request options. You can use the functions onResponse and onRequest in the options to change both the response and request respectively. Or just set the headers field, either from runtimeConfig if it's an app config, or from another composable if it's a user auth header for example
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?
the component will suspend with await, using lazy is a way to opt out of it client side i think it’s really nice to have the same code for both ssr and client, but the specifics of all the options can get confusing.
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 :)
@@LearnVue I had to spend some time to figure out what was called on the server, what was not for example. Correct me if I'm wrong, but as I understand, server components (still experimental) are actually the only way to have secure logic inside components. Otherwise you have to use the server part and make api calls (where the first render may be safe and made on the server but all subsequent calls are made client side).
Mh .. still not clear to me, do we need to add the await or not?
Need more Vuejs and Nuxtjs content 💚
I'm still confused. so for SPA which one i should use?
the most confusing topic in Nuxt, finally well explained. thanks
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
nuxt sucks because of this.
@@najlepszyinformatyk1661 makes you think they intentionally do bad docs... so they can sell their courses and certificate wich seems a thing now.... i think everyone would laugh in Estonia.. i would t try to get hired saying i have a "nuxt certificate" , would be seen as stupid tax.
The deeper you get into open-source libraries, the more you realize every library has this issue. Learning to read source and auto-generated documentation is key to mastering these tools.
Nuxt 2 gave me a horrible impression of Nuxt, so horrendous I just don't touch Nuxt nowadays. There was no human readable documentation, no typing, too much forced magical globals, string to symbol magic (even into global symbols), no proper informative errors, impossible migration/updates, very slow development of Nuxt 3 and the bridging methods, errors happening from absolutely nothing for zero reasons (that are non-documented and impossible to track down), very slow hot module replacement and a whole lot of other things that made me lose so much sleep and gave me gray hair.
Just think about it: forced global variables, that have absolutely zero typing/type-hinting. Never fails to be a ground for eventual impossible to track down runtime errors. Forcing you into re-typing everything manually via .d.ts into global scope. Again, unmaintainable, unreliable and evil, because human factor.
At least they have typing now
Idk what your talking about the docs are great now
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! ✨
Sorry but It's still doesn't clear to me, if its client side fetching then I think await is not needed, and it wont block navigation when its client side
I'm still confused. I definitely have to watch this video more than once. Thank you.
yeah it's a pretty dense topic. let me know if you have questions
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.
Thanks for the great explanation
Btw pending is deprecated, it is now status
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.
it won't render on the server, but tbh it's still unclear if/how/when Google renders JS client-side. If you want to be sure it won't be indexed, useSeoMeta is probably your best bet
It is "probably" still indexed by Google *but* SEO would be better when rendering it on the server. Not even starting to talk about OG tags which aren't available otherwise (if they rely on the data)
I’m still confused. Does “await” matter?
yes. For data to be accessible (not be a promise) in the script setup.
@@nishantrai982 Thanks! I listened to the video in the background and missed this key detail.
This really clarifies things. Nuxt team should add link to this video in their docs.
Why is server side navigation / initial request blocked when using useLazyFetch / useLazyAsyncData?
WE'RE SO BACK BABY
back like i never left 🫡
I'd say I got it -ish. I still don't understand what behavior exactly is impacted whether or not we await useAsyncData/useFetch. Could you elaborate more on that?
We should keep it simple, simplicity makes working with a framework nice.
When using nuxt , do i need to use Axios and set global interceptors !?
They used to create repositories with axios, now I just make a service class which every method is a composable "useFetch"-like which in turn uses a custom plugin that auths to my api and has the base url read from .env
So no axios here
what's the font ur using?
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?
thanks for this great video, it will be much better if u provide some examples and code with pinia and ssr cuz still i am confusing how to use pinia and requests on ssr
the pending ref is deprecated ;) best to use status
Very good point!
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 follow the example in the documentation - "Use Custom Fetch Composable" - it's basically a wrapper around the use fetch with default request options. You can use the functions onResponse and onRequest in the options to change both the response and request respectively. Or just set the headers field, either from runtimeConfig if it's an app config, or from another composable if it's a user auth header for example
Alexander Lichter dropped a banger video that could be helpful here - ua-cam.com/video/jXH8Tr-exhI/v-deo.htmlsi=RMZ23k-Vkwbqi6y9
In one project I created my own instance under composables and use that instance to pass data.
Thanks for explaining it in such an easy way.
Love this, thanks for the explanation!
glad it was helpful
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?
the component will suspend with await, using lazy is a way to opt out of it client side
i think it’s really nice to have the same code for both ssr and client, but the specifics of all the options can get confusing.
very fast transition screen and is it possible to slow down your narration
Use ( Shift + < )
This explains a lot for me, thank you
appreciate u fr
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 :)
Guys, could anyone tell me which font and theme author uses?
Looks like it could be operator mono
butter smooth explanation 🤩
glad you think so :)
Nuxt is flexible. But damn! it's not always obvious to know which tool to use and when :/
So true!!
any specific tools youre thinking of? im always down to make some more vids !
@@LearnVue I had to spend some time to figure out what was called on the server, what was not for example. Correct me if I'm wrong, but as I understand, server components (still experimental) are actually the only way to have secure logic inside components. Otherwise you have to use the server part and make api calls (where the first render may be safe and made on the server but all subsequent calls are made client side).
@@blokche_dev Correct
Great video, it explains a lot!
great video
i was confused about this for a while
now i understand it
THANK YOU! KEEP GOING!
Powerful explanation
thank you for explaining this
great content! 10x matt .
Thank you so much awesome video
And useLazyFetch? :P
bit salty you just posted this, i kind of spent the last week coming to the same conclusion 😶😶
Function vs V -
👍