Wow thank you for the clear explanation and a great demo. I think your pacing is perfect and I learned A LOT about Nuxt. As a newcomer to Nuxt videos like this are really helpful for showing me best practices.
Wow, to think this was in 2019 the whole time. Honestly, a lot of the stuff you covered I have been struggling to find for literally years. You explain things in terms that other people seriously over complicate. Definitely going to sub and look through all of your other videos now. Sucks it took so long, but damn am I happy I found your channel.
This is so, so helpful, thanks! Nuxt really needs to get more love. Would love to see a video from you on Nuxt's server middleware, such as handling API calls related to Stripe payment processing and webhooks. Thanks again!
@@KaizenCodes, thanks for such a quick reply! Totally understand, and if you get the time at any point, would really appreciate it. In my opinion, Nuxt's server middleware really super-charges the framework, but there are literally only two short videos on the topic in all of TH-cam, as far as I can find. Have a good one!
Just an update year, in the next two weeks I’m releasing a Nuxt A-Z video inclusding an internal API with serverMiddleware 🙌 At this point you’re probably a pro anyway 😉
Haha I know the feeling! Sometimes it’s better for me to just head to bed and wake up early with a good cup of Joe to continue tackling the problem at hand. 🙌 take care man, the code will always be there.
Tip: Compress your audio to -3 dB threshold and hard attenuate above that. It will greatly improve your voice and your videos and help get your message across.
Hey this is really a great video, thanks! I just have a question for usage that I am still finding confusing. If you are using Axios Services and Vuex Store Modules (i believe this is recommended Nuxt Practice) how do these come into play? 1. Do you have to use async & await for all your functions throughout the data 'lifecycle' i.e. function on Component-> function on Module -> function on Service.. or just the initial function? 2. Is the proper way to render the data with this type of set up with asyncData, or fetch if you are loading a dynamic route page? Thanks!
Hi Brian, good questions. I don't think that there is a perfect answer, but instead I can maybe give you my thoughts on how I would handle it, hopefully something useful :) Yes nuxt has axios as it's preferred tool for communication in and out of the client, so I would stick with that as the docs are pretty intuitive too. For the structure - it really depends on the size of the application. If the app has one view/component that needs to make some API request, I don't think a store module is required unless future scaling up is expected. If the app has many components/views relying on that data, I would delegate the axios call to a store action yes. As for fetch/asyncData I believe Nuxt is starting to deprecate fetch :/... Instead they are recommending a 'anonymous middleware'. I may do a video on this soon. I would simply use the nuxtServerInit action in the store (if the app is a ssr). To call the axios request on load if the data is required immediately. If it needs to happen on some event. I'll create a store action and call it from a method in the component. The way I'll pull the data into all it's views are with the vuex { mapState } or { mapGetters } module in computed properties on the client side. Hope that made sense!
@@KaizenCodes Thanks for the response! We are trying our best to anticipate a future use of multi-website type dynamic skeleton but learning as we go. I have solved the problem for my first question, if anyone has proper usage please let me know. I found that using async and await all the way back to the service(from the component->store->service) worked as expected. I will definitely keep my eyes peeled for the new video and hope we can integrate before deployment! Does the nuxtServerInit independently call on each Store Module, or just the index.js store module? I remember diving down that path and I dont believe that I had any luck with that attempt. I used this and got the desired results. We are using the vuex mapstate as well and it is working great with data across several nested component structures. async fetch({ store, params , query}) { const slug = params.slug const sku = query.sku await store.dispatch('category/fetch',{ slug : slug, sku : sku }); },
This is a great overview. Thank you. I am wondering if there is a difference in using the store when you are in layouts/default and calling in a component that is used on all the pages like a footer for example? Apparently you can't use asyncData there. At least in Nuxt2 and that can't be changed for me.
Good question. The store is global. It makes no difference if you call it from components or layouts or pages. You are always referencing the same state in memory. The components should be reserved for pure Vue components and you’re right it doesn’t support asyncData. If you need server rendering on the component data in Nuxt > 2.12 you can use the ‘fetch’ option. Otherwise you can use asyncData in the page that’s using the component and pass the data down as props. If server side rendering is not a must you can always use this.$store in the mounted hook of the component. You’ll just have to manage loading states in your data. Hope that helps!
at 16:26, u said that the commit is happening in the server, but why? cos store is a vue thing like the case for 'this', it can't be accessed in the server because it's a vue thing, and so is store. Can you clarify this point? Thanks
Hey! So Nuxt in this case passes the store in the ‘context’ parameter. Which makes it available on both the client and the server. ‘this’ is actually also available in the ‘fetch’ function which runs serverside and client side, but ‘this’ is not available in asyncData, therefor you need to use the store from the function parameter which Nuxt passes in the context. It does sound a bit confusing and perhaps I should make a video about these different context’s and what’s available to them in the different environments, but think of it like this: Vue is the rendering engine. Which actually does get executed on the server too (that’s why you’ll sometimes get errors when trying to SSR a component which is trying to access ‘window’, because it doesn’t exist in the server). It runs much like it runs in the browser, by pre-generating all of the data and HTML and CSS on the server through the Vue engine. Then when it mounts in the browser - all your client-side Vue will execute. Hope this makes sense, but think it warrants another video. Good question because in Nuxt development it can be confusing to keep track of what’s ‘server’ and what’s ‘client’ since all the code seems to just live in the same file.
@@KaizenCodes Hey! Yeah actually it kind of need a video because as you've said, it's confusing to keep track of what’s ‘server’ and what’s ‘client’ haha. but what I've understood is that the store property in the context is like a copy of the actual store that's in the client.
@@captainalpha4853 Yes :) The store will be hydrated on the server and be available on the client. E.g. the special ‘nuxtServerInit’ action is only available on the server and this logic will not be shared with the client.
Will you be able to post this source code to github? Will be greatly appreciated...I wanted to code along but you already have some code in the beginning
I need urgent help. I am using NuxtServerInit and I don't have access to $axios properly.. keeps giving 404 error. Can we talk via emal or probably a short call. I'm late on timeline already
Any idea how to get store value stored on localstorage on middleware when page is refreshed?.. I have a page where user must verify their age once they verify age then only they can move to another page. Now I store the user verified age data on store localstorage then when I refresh page it throws user to verify page again when I check store there is data, but middleware runs only on serverside while refresh.. How can I solve this? Works fine in spa mode but universal mode not working..
Hi Aashu. I can suggest having a look at router middleware and checking if process.client is truthy. Before the user enters the page do localStorage.getItem(‘age(or whatever the key is)’).
@@KaizenCodes I did check but when page is refresh middlewear works on servers side where there is not localstorage nor window and got null or undefined... Works fine if page not refreshed.. Please suggest
@@KaizenCodes I did when I check if process.server and process.Client.... When refresh page process.server works and on changing route process.client but data is stored on localstorage which is not accessible from process.server.. I need a middleware which works client side, but here on nuxt what I found is middleware works servers ide while refresh or load page at very first time then client side.. Which is why I am having issue if user refresh browser middleware will not get data as they are stored on localstorage.
@@AashuMishra-lastpiece The only way I can assist you further is if I can have a look at the code. :) I'm sure it's just a small logical error in the life cycle. If you feel comfortable sharing the repo. Email me at social@kaizen.com.na
Ahmed Hamdy I finished my exams a week ago, waiting for results on that and thesis. Fingers crossed and thank you very much. And yes I will make the course, definitely. I’m currently in the UK so I don’t have my recording equipment, but I’ve started planning. I should release it before 2020. Want to make it as useful as possible ✌️
Ahmed Hamdy Dude :) your soul is worth a lot more than my lousy tutorials. But thank you for asking so specifically, really helps me know what to create. I’ll do that for you man. I’ll be back in Namibia around the 13th of December, then I’ll start recording ✌️
Wow thank you for the clear explanation and a great demo. I think your pacing is perfect and I learned A LOT about Nuxt. As a newcomer to Nuxt videos like this are really helpful for showing me best practices.
more videos Nuxtj please. Login, localstorage, sesion.
Wow, to think this was in 2019 the whole time. Honestly, a lot of the stuff you covered I have been struggling to find for literally years. You explain things in terms that other people seriously over complicate. Definitely going to sub and look through all of your other videos now. Sucks it took so long, but damn am I happy I found your channel.
Yes make the course defiantly. There needs to be more rising devs using Vue & Nuxt! Screw React.
Great video, You could get $axios through context in asyncData(context) and then const { posts: { titles }} = await context.$axios.$get(url);
This video is the perfect explanation of the concepts I have been struggling with
Awesome glad it helped Marek. I’ll be releasing a new playlist on Nuxt A-Z soon too.
Been looking all over for a clear explanation on this.Thanks!
This is so, so helpful, thanks! Nuxt really needs to get more love. Would love to see a video from you on Nuxt's server middleware, such as handling API calls related to Stripe payment processing and webhooks. Thanks again!
Thanks man! I appreciate the recommendation. I haven’t had much time for YT recently. But I’m working on a list of videos so this helps a ton!
@@KaizenCodes, thanks for such a quick reply! Totally understand, and if you get the time at any point, would really appreciate it. In my opinion, Nuxt's server middleware really super-charges the framework, but there are literally only two short videos on the topic in all of TH-cam, as far as I can find. Have a good one!
Josh Magee gotcha man! I agree. It’s underrated!
Just an update year, in the next two weeks I’m releasing a Nuxt A-Z video inclusding an internal API with serverMiddleware 🙌 At this point you’re probably a pro anyway 😉
From a complete beginner: thank you for the clear explanation!!! Very nice video, please go on with this work of yours!!!
More to come!
thanks for this nice demo ... its 03:21 am and I've been struggling with this from 21:00pm 🤓🤓🤓🤓
Haha I know the feeling! Sometimes it’s better for me to just head to bed and wake up early with a good cup of Joe to continue tackling the problem at hand. 🙌 take care man, the code will always be there.
Excellent video and explanations, I have to translate my owl vueJs application to Nuxt.
Your video helped a lot. Thank you from France
Absolutely fantastic explanation. Thanks!
So what is the difference
asyncData ({store}) vs fetch({store}) ?
Thanks a million for this. It really helps!!!
finally someone talked about it
This video made me subscribed to your channel, you made it easy.
Thank you so much from Viet Nam.
More nuxt real series, blog/ ecommerce / thanks
Tip: Compress your audio to -3 dB threshold and hard attenuate above that. It will greatly improve your voice and your videos and help get your message across.
Noted!
At 21:30 i think you made a mistake of putting fetch or asyncData methods in regular components. They are available only in page components.
Hey this is really a great video, thanks! I just have a question for usage that I am still finding confusing.
If you are using Axios Services and Vuex Store Modules (i believe this is recommended Nuxt Practice) how do these come into play?
1. Do you have to use async & await for all your functions throughout the data 'lifecycle' i.e. function on Component-> function on Module -> function on Service.. or just the initial function?
2. Is the proper way to render the data with this type of set up with asyncData, or fetch if you are loading a dynamic route page?
Thanks!
Hi Brian, good questions. I don't think that there is a perfect answer, but instead I can maybe give you my thoughts on how I would handle it, hopefully something useful :)
Yes nuxt has axios as it's preferred tool for communication in and out of the client, so I would stick with that as the docs are pretty intuitive too.
For the structure - it really depends on the size of the application. If the app has one view/component that needs to make some API request, I don't think a store module is required unless future scaling up is expected.
If the app has many components/views relying on that data, I would delegate the axios call to a store action yes.
As for fetch/asyncData I believe Nuxt is starting to deprecate fetch :/... Instead they are recommending a 'anonymous middleware'. I may do a video on this soon.
I would simply use the nuxtServerInit action in the store (if the app is a ssr). To call the axios request on load if the data is required immediately. If it needs to happen on some event. I'll create a store action and call it from a method in the component.
The way I'll pull the data into all it's views are with the vuex { mapState } or { mapGetters } module in computed properties on the client side.
Hope that made sense!
@@KaizenCodes Thanks for the response! We are trying our best to anticipate a future use of multi-website type dynamic skeleton but learning as we go.
I have solved the problem for my first question, if anyone has proper usage please let me know. I found that using async and await all the way back to the service(from the component->store->service) worked as expected. I will definitely keep my eyes peeled for the new video and hope we can integrate before deployment!
Does the nuxtServerInit independently call on each Store Module, or just the index.js store module? I remember diving down that path and I dont believe that I had any luck with that attempt.
I used this and got the desired results. We are using the vuex mapstate as well and it is working great with data across several nested component structures.
async fetch({ store, params , query}) {
const slug = params.slug
const sku = query.sku
await store.dispatch('category/fetch',{
slug : slug,
sku : sku
});
},
Excellent explanation, thanks.
You are welcome!
so nice videos, and I live your "kanji" that meanings improvement !
This is a great overview. Thank you. I am wondering if there is a difference in using the store when you are in layouts/default and calling in a component that is used on all the pages like a footer for example? Apparently you can't use asyncData there. At least in Nuxt2 and that can't be changed for me.
Good question. The store is global. It makes no difference if you call it from components or layouts or pages. You are always referencing the same state in memory. The components should be reserved for pure Vue components and you’re right it doesn’t support asyncData. If you need server rendering on the component data in Nuxt > 2.12 you can use the ‘fetch’ option. Otherwise you can use asyncData in the page that’s using the component and pass the data down as props. If server side rendering is not a must you can always use this.$store in the mounted hook of the component. You’ll just have to manage loading states in your data. Hope that helps!
nuxtjs.org/docs/features/data-fetching/#async-data-in-components
thanks so much! needed to touch up on this x
I was looking for the same video but with nuxt3
Really useful video dude, cheers!
Glad it helped!
Thx for sharing
You can get axios from the asyncData with asyncData({ $axios })
I think that it's better than importing it
Good catch!
at 16:26, u said that the commit is happening in the server, but why? cos store is a vue thing like the case for 'this', it can't be accessed in the server because it's a vue thing, and so is store. Can you clarify this point? Thanks
Hey! So Nuxt in this case passes the store in the ‘context’ parameter. Which makes it available on both the client and the server. ‘this’ is actually also available in the ‘fetch’ function which runs serverside and client side, but ‘this’ is not available in asyncData, therefor you need to use the store from the function parameter which Nuxt passes in the context.
It does sound a bit confusing and perhaps I should make a video about these different context’s and what’s available to them in the different environments, but think of it like this:
Vue is the rendering engine. Which actually does get executed on the server too (that’s why you’ll sometimes get errors when trying to SSR a component which is trying to access ‘window’, because it doesn’t exist in the server). It runs much like it runs in the browser, by pre-generating all of the data and HTML and CSS on the server through the Vue engine. Then when it mounts in the browser - all your client-side Vue will execute.
Hope this makes sense, but think it warrants another video. Good question because in Nuxt development it can be confusing to keep track of what’s ‘server’ and what’s ‘client’ since all the code seems to just live in the same file.
@@KaizenCodes Hey! Yeah actually it kind of need a video because as you've said, it's confusing to keep track of what’s ‘server’ and what’s ‘client’ haha. but what I've understood is that the store property in the context is like a copy of the actual store that's in the client.
@@captainalpha4853 Yes :) The store will be hydrated on the server and be available on the client. E.g. the special ‘nuxtServerInit’ action is only available on the server and this logic will not be shared with the client.
@@KaizenCodes ooooow kaay, now it makes sense lol. Thanks a lot man!
@@captainalpha4853 NP! Thanks for the video idea 💪
asyncData and fetch only run on pages if I'm not wrong?
The methods are only callable from pages (or anywhere where you have access to Vue options). But it runs both on server and on client.
thanks so much
Useful
Will you be able to post this source code to github? Will be greatly appreciated...I wanted to code along but you already have some code in the beginning
Will have a look on my machine if I still have the code and post it up.
I need urgent help. I am using NuxtServerInit and I don't have access to $axios properly.. keeps giving 404 error.
Can we talk via emal or probably a short call. I'm late on timeline already
Contact me on social@kaizen.com.na with the code and an explanation. I’ll reply within 24h
@@KaizenCodes Sent an email, please check. Thank you
Are you there?
Great video man....
Appreciate it!
Great video
Thanks for the visit
Any idea how to get store value stored on localstorage on middleware when page is refreshed?.. I have a page where user must verify their age once they verify age then only they can move to another page. Now I store the user verified age data on store localstorage then when I refresh page it throws user to verify page again when I check store there is data, but middleware runs only on serverside while refresh.. How can I solve this? Works fine in spa mode but universal mode not working..
Hi Aashu. I can suggest having a look at router middleware and checking if process.client is truthy. Before the user enters the page do localStorage.getItem(‘age(or whatever the key is)’).
@@KaizenCodes I did check but when page is refresh middlewear works on servers side where there is not localstorage nor window and got null or undefined... Works fine if page not refreshed.. Please suggest
@@AashuMishra-lastpiece checking if process.client should help you. Will make sure code only runs on client side
@@KaizenCodes I did when I check if process.server and process.Client.... When refresh page process.server works and on changing route process.client but data is stored on localstorage which is not accessible from process.server.. I need a middleware which works client side, but here on nuxt what I found is middleware works servers ide while refresh or load page at very first time then client side.. Which is why I am having issue if user refresh browser middleware will not get data as they are stored on localstorage.
@@AashuMishra-lastpiece The only way I can assist you further is if I can have a look at the code. :) I'm sure it's just a small logical error in the life cycle. If you feel comfortable sharing the repo. Email me at social@kaizen.com.na
amazing
Thank you! Cheers!
did you graduate yet bro? if yes then congratz
Ahmed Hamdy I finished my exams a week ago, waiting for results on that and thesis. Fingers crossed and thank you very much. And yes I will make the course, definitely. I’m currently in the UK so I don’t have my recording equipment, but I’ve started planning. I should release it before 2020. Want to make it as useful as possible ✌️
@@KaizenCodes I wish you the best results bro
Ahmed Hamdy Dude :) your soul is worth a lot more than my lousy tutorials. But thank you for asking so specifically, really helps me know what to create. I’ll do that for you man. I’ll be back in Namibia around the 13th of December, then I’ll start recording ✌️
@@KaizenCodes LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU, LOVE YOU,
thank you for this.
voice volume is too low :(
Ahmad Mobaraki I noticed. Sorry about that. Just fixed my mic settings. Next few videos should be better.
@@KaizenCodes :heart :heart, Thanks for the great video anyway
South African?
SMaree Namibian!
@@KaizenCodes close. Nice tutorials