NuxtJS data, asyncData, fetch and nuxtServerInit - when, how, why?

Learn how to work with the different kinds of properties and methods in NuxtJS to model your application's data. Get data asynchronously from NuxtJS before redndering your app or use the Fetch / nuxtServerInit methods to populate your Vuex store on the server.

Thanks for your viewership. Now Go Code!

[tnederlof]

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.

[marekbee]

This video is the perfect explanation of the concepts I have been struggling with

[theomegamale]

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.

[derricknare]

thanks for this nice demo ... its 03:21 am and I've been struggling with this from 21:00pm 🤓🤓🤓🤓

[saucedbenny]

Been looking all over for a clear explanation on this.Thanks!

[nilsonmonte]

From a complete beginner: thank you for the clear explanation!!! Very nice video, please go on with this work of yours!!!

[diego_elohim]

This video made me subscribed to your channel, you made it easy.

[HandcartRule]

Absolutely fantastic explanation. Thanks!

[TheNerethim]

Excellent video and explanations, I have to translate my owl vueJs application to Nuxt.
Your video helped a lot. Thank you from France

[derekchan]

Thanks a million for this. It really helps!!!

[JoshuaTMagee]

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!

[karlcharles]

Yes make the course defiantly. There needs to be more rising devs using Vue & Nuxt! Screw React.

[diegorocha]

Great video, You could get $axios through context in asyncData(context) and then const { posts: { titles }} = await context.$axios.$get(url);

[emersonsmithperu]

more videos Nuxtj please. Login, localstorage, sesion.

[ivanpln]

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.

[semkoo]

So what is the difference

asyncData ({store}) vs fetch({store}) ?

[biancascheffer]

thanks so much! needed to touch up on this x

[captainalpha]

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

[tiety]

so nice videos, and I live your "kanji" that meanings improvement !

[briansackett]

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!