Nuxt.js - Introduction by Project

Nuxt.js is a framework/ library for Vue.js - it makes the development of Vue.js applications easier and adds easy SSR (server-side-rendering) support. Let's dive in!
----------
Dive in deeper: acad.link/nuxtjs
Learn Vue.js first: acad.link/vuejs
Take the Vue.js series: academind.com/learn/vue-js/le...
Official docs: nuxtjs.org
context API: nuxtjs.org/api/context
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@tannergrant237]

Max, you have a gift of teaching. You explain things clearly and concisely with such a passion which makes it easy to stay attentive and retain information. Thank you for the time and effort you put into making your videos! You have helped me and my small business progress toward building beautiful Vue/Nuxt web apps!

[@academind]

Thank YOU for your awesome feedback! Reading that you like my videos and my explanation style really means a lot to me and I definitely mean it like that!

[@imakeinternetdev]

If every teacher taught like this we'd all be out of work. Brilliant video!

[@junihh]

Just to say: THANK YOU A LOT! This video answer some questions for my next project.

[@PetervandePas]

One of the best tutors so far. Gonna watch the rest of this course

[@Peshyy]

Thank you for making such quality tutorials. I've bought the VueJS complete course and I instantly bought the Nuxt.js course as soon as I received your email!

[@academind]

Wow, I can only say thank YOU for your great feedback and for your awesome support! I really hope that you will also like the Nuxt course :)

[@ThanhSongiatai]

I instantly bought the Nuxt.js course as soon as I received your email!, I boutght 4 your course.

[@academind]

Awesome to hear that - welcome on board! :)

[@kengresify]

yeees. just joined the course!!! you're the best Max. Keep doing what you do!

[@academind]

Thanks so much for your support, I hope that you will like the course :)

[@parzh]

Gosh, ... I can't believe it, that was so darn simply explained! Thank you so much Maximilian!

[@academind]

That's really so cool to read, thank you very very much :)

[@dizzyrocket2000]

Just what I was looking for! Thank you, you're an AMAZING teacher! 👏👍

[@jomesias]

Dude I wish I could give you a million likes! I had created the nuxt bare project but had no idea what to do! I got the hang of it now! Thanks so much

[@peijunwu7040]

Best vue and js teacher ever.

[@invshakil]

Following you like for 3 years, you made me Vue js fan, nuxt js fan, take love max! Love from Bangladesh :D

[@academind]

Thanks for your longterm support!

[@NewtonJR1987]

Great introduction, Max! Thank you.

[@nurbekfayziev]

Very coherent speaker! Thank you for that! For explaining each detail in details!

[@dmdk8301]

My favourite blogger and coder. Missed you, but finally i need your vids.

[@academind]

Thank you Dmitry! Not sure why you missed me though, I was never gone :)

[@TheBurgija]

Man thanks so much for all of this with that much enthusiasm, really you're awesome and i can't thank you enough. Wish you best of luck in life.

[@academind]

Wow, thank YOU for such a wonderful feedback Sta! I also wish you all the best :)

[@marvenwilsonsdonque1568]

Wooohoo!! I asked you about this and you made it... am gonna do my laundry first and watch this.. am exitedddddddddd!

[@academind]

Happy to read that it's interesting for you Marven, thank you! And good luck with the laundry ;)

[@abdullahfurkanozbek7558]

Thank you for the introduction Max 😊

[@KevinStefferDk]

Very clear explanation supported with great demos - thanks 👌

[@nishantsethi6625]

Thank you much. your tutorials always give me confidence. I can say I can play with nuxt now.

[@abdelazizmokhnache766]

Max I remember when I asked you few weeks ago to do a course about Nuxt.js for us hhh I hope you remember me too :) .. I will buy it on udemy because your tutorials are worth spending money on them .. thank you very much

[@academind]

I remember you Abdelaziz, I think it was in the Academind 2.0 video :) As promised, I created "some" Nuxt content. I hope you will like the course, would be great to have you on board!

[@abdelazizmokhnache766]

that's right Max .. it was on Academind 2.0 video :) .. You promised us and you kept your promise .. thank you very much :)

[@rifatozturk]

it's just, just perfect! you have excellent expressions on coding with high technical abilities. you are the best teacher i have ever seen. i will definitely buy some of your courses. thank you very much.

[@academind]

Thank you very very much for your awesome feedback Rifat! This honestly means a lot to me, looking forward to see you in the courses :)

[@hesanamini809]

Thanks! You are a really great teacher , I like the way you explain things. I really appreciate your efforts you put in your videos. God job, Keep it up ❤️👍🏻

[@academind]

Thank you very very much for your awesome feedback Hesan! It really makes me happy to read that you like the videos and I'll try my best to keep it up :)

[@wolffn1]

Great video. Thanks Max!

[@jsonkody]

if I dont know nuxt and making just regular vue web app now and after some time I would like use nuxt >>> is it simple or not so hard to add it to my project or is it enormout work, like rewrite whole project?

[@miguelacosta707]

As always, you are awesome Max. Thanks for your tutorials.

[@academind]

YOU are awesome Miguel, thank you very very much for your support!

[@ImamTaufikFirdaus]

i thinking about to be one of your fans.. what an amazing lesson i got! thanks in advance

[@TerenceKearns]

Wizle studio code.... love it :) You are a great teacher Max. Love your work.

[@academind]

Happy to read that you like both the video and my pronunciation Terence, thanks a lot ;)

[@ibrahimmohammed3484]

for someone who comes from the angular planet, thank you for your really good explanation

[@academind]

Awesome to read that the video was helpful for you Ibrahim, thanks a lot for sharing this!

[@BenHayat]

Max is the best... Just bought the Vue js 2 course that I'm going through now. I guess I need to buy the Nuxt js course as well, as I need MANY pages for my app. For example I might have a Grid, that shows details of each record or lots of data entry pages for users to enter data or view graphs and etc. So I need a multi-page solution than a SPA.

[@academind]

Welcome on board and many thanks for the awesome feedback Ben! :)

[@user-q3g5h7wq5k]

Bought your course on Vue after this video. Great explanation!

[@academind]

Thanks so much for your support Alex, great to have you on board :)

[@asdfghjkllkjhgfd]

Very instructive! Thanks ❤️❤️

[@moviedevil12]

Very detailed and clear tutorial!

[@heyyy4987]

I have been watching nuxt and think its very amazing. Tanks for your video, waiting for more about nuxt.

[@academind]

That's really cool to read, I also love Nuxt to be honest. More content to come in the next weeks (here on the channel and on academind.com)

[@CsabaKissColorado]

Fantastic intro to nuxtjs. I purchased the udemy course after this great video.

[@academind]

So happy to read that Csaba! Thank you very much for your comment and for your support, I hope that you will like the course :)

[@yandodov]

Thank you for this introduction video!

[@academind]

Thank YOU for your comment Hristiyan!

[@ramachandran2023]

Max always simple and wonderful

[@FancyCookin]

Great video, Max! Very clear and informative!

[@academind]

Thank you very much!

[@BrianPercival1]

Love your tutorials. You really explain a lot of concepts very well. I have a Vue app (not created with Nuxt) and I'm interested in knowing if it could have been made using Nuxt. The caveat to this app is that it will live in a 'portal' environment of the client. The actual Vue code lives on another server. I don't 'own' the html page but instead, I have a div and a javascript file that I am using to include the Vue app. I have made everything inside my app self contained in order to not pollute the global space very much. I'm assuming that Nuxt would need an proper html page to be rendered by the server and not just a fragment?

[@thebestcoders]

Hi Max, thanks for your video :). Like you find on the base of number(id) and I did exactly as you guided but when I find on the base of any text that time page is giving me an error. Please help to resolve this.

[@LucasSilberberg]

Thank you for your explanation, clarified me many doubts to start. can we download this sample project?

[@flavb83music]

Very nice and clear introduction.

[@MohammadArifRahim]

Excellent intro to nuxt.

[@gencproyazilim]

I loved that tutorial. thanks so much. Nice expression.

[@SuperKiingg]

thank you Max you helped me a lot to start with nuxt :)

[@academind]

Great to read that the video was helpful for you Mohamed, thanks so much for your comment!

[@andrewrico8321]

THANK YOU!!!!!! i already bought several of your courses.

[@academind]

Thanks a lot for your comment and for your support Andrew, great to have you on board here and on Udemy!

[@sanketketkar4557]

Awesome tutorial. I have done server side rendering with react and know of pain of setting it up specially handling routes at both client and server. Any plans for Next.js tutorials?

[@KimcheeOnATaco]

As usual always putting out great content Max --thanks! As a sidenote request, I'd really love to see something on unit and end to end testing in Vue.js someday.

[@academind]

Thanks for the great feedback and this suggestion. Testing is on the list of ideas, I hope I find the time to create some useful content on it :)

[@KimcheeOnATaco]

I did not know you created this course: www.udemy.com/vuejs-2-the-complete-guide/learn/v4/overview That's great! I'll get it later. I also purchased your React course, which I'll probably do someday, but I really love Vue.js and everything about. Thanks

[@kainarilyasov4644]

Fully explained tutorial. Great Job. Really like it.

[@academind]

Thanks a lot Kainar, happy to read that!

[@ozanmuyes]

You are an awesome tutor Max, thanks man. The simplicity you bring the complex topics are priceless. EDIT: At 11:40 you said "...only runs in Node, you can't use it [Nuxt.js] with PHP or anything like that" so it was true back then but now you can actually, thanks to Vue community (especially Evan You of course). Haven't use it though it's good to know that you can - see the docs here ssr.vuejs.org/en/non-node.html

[@academind]

You're right, thanks for sharing this! Behind the scenes it basically still uses Node.js (its runtime - V8 - to be precise) but of course this is a major step!

[@ozanmuyes]

Thanks for the reply, yes it still needs to process the JS somehow (hence the V8). Personally I wouldn't do the SSR this way due to its own unique, hair-scratching, implementation peculiarities (one can consult github.com/phpv8/v8js). The thing is if you can install it (to bare-metal or VPS - so you are not in a shared hosting environment) its better to stick with Node.js.

[@peakzennit]

This is a really great tutorial.

[@fabricebizimana6785]

thanks bro, this was really helpful

[@pragneshchaudhari9351]

Max is awesome as always. Keep it up.

[@ASoftwareEngineer]

great video Max, thanks much as always.

[@academind]

Thanks so much for your comment Angelo!

[@12XFactor]

This video is your Sistine Chapel of your Vue videos. I take my hat off to you.

[@academind]

Wow, thank you very very much, this is just amazing to read, definitely means a lot to me :)

[@RobertKent]

Thanks that was a great intro to Nuxt!

[@academind]

Thanks Robert, awesome to hear that!

[@salinderru]

tx a lot! the best course in whole internet

[@academind]

That's so awesome to read, thank you very much for your comment!

[@bakhtiyor_sulaymonov]

Thank you for the video! Really helpfull to get started with NuxtJS

[@academind]

That's great to read Bakhtiyor, thank you for your comment!

[@PaulysGarage]

Good video and very informative. Thank you.

[@SvingitGolf]

How can I host a Nuxt app on shared hosting with dynamic routes?

[@user-bv7hv6iy9h]

nice! Thank you.

[@user-gq7lg3rb9t]

THANK YOU! LOVE NUXT

[@academind]

It really is so cool to work with, great to read that you also like it :)

[@edenwebstudio6361]

Max always creates food based apps. Must be a good cook !

[@academind]

I indeed like to cook :)

[@mateusspadari5171]

Thanks for the amazing vídeo !

[@user-su8qo4xz5j]

Thank you!!!

[@patrickhao9011]

Very very clear explanations. Keep it up :)

[@academind]

Happy to read that you like it Patrick, thank you! I'll try my best to keep it up :)

[@RDaneelOliwav]

This is awesome!

[@mledesma64]

Thank you!

[@LebaneseNostalgia]

yayyyyyyyyyy!

[@RooTHackera]

Thank you. God bless you.

[@rezwansaki]

Nice tutorial. Thanks

[@vadim431]

Привет из России! Ты очень крутой и уроки по VueJS одни из лучших в интернете. После просмотра твоих видео, хочется идти и создавать что-нибудь крутое)) Hello from Russia. You are very cool and your VueJS lessons are one of the best on internet. After watching your videos I always want to make something cool))

[@jonasgroendahl]

Gonna be diving into the udemy course at some point, this video was great :)

[@academind]

Great to read that you like the video! Feel free to have a look at the course whenever you want to :)

[@reristavi]

Excellent. Thank you.

[@academind]

That's so great to read Revaz, thank you very very much!

[@musoverda5500]

Excellent, Max!

[@academind]

Thank you so much Moe!

[@PierreMorelChannel]

Great tutorial. I have a question. Does a client / server application require more data transfer and machine time than an application that runs completely in the client browser? If I want to host my application say at a provider, say Google Hosting where we are charged for transfer and CPU time will it cost me more with a client / server application than a SPA?

[@TrouvatkiDePercusion]

Holy shit, dude, you're one of the heroes of the internet. If you're every in either Hungary, Serbia, or Romania, I'd be quite honoured to buy you a beer.

[@academind]

I'll definitely come back to that - thanks so much Genghis! :-)

[@FernandoJavierSosa]

Awesome video, thank you!

[@academind]

Thank YOU for your comment Fernando!

[@jbsness5375]

Thanks Max, perfect like always ;-)

[@academind]

So cool to read that, thank you very much!

[@blu3_enjoy]

you a smart cookie bro thanks

[@josetorreblanca655]

This was my first contact with Nuxt.js so thank you very much for the simple explanation. I was running into an issue that everytime I load the /recipes route for the first time, it will render everything fine, but after using the headr menu and changing routes, onces back to the /recipes route it would not render all attributes, exactly the style attribute where we redered the background image. I just set all the style to a computed property and it worked then. Can anyone explaiin why?

[@IndianTinker]

Just to tell. Your videos are super. I just buy your courses on Udemy so I feel good when watching these amazing youtube video. Danke Amigo !

[@academind]

Thanks a lot for your great feedback and your awesome support here and on Udemy Roshit!

[@IndianTinker]

@@academind It is "Rohit" BTW :P

[@RafaganAbreu]

Your channel and udemy courses are amazing!

[@academind]

Glad you like them!

[@aboutgrantchambers]

Max - you are awesome. Thanks for these videos! Have you ever thought of looking at doing a course on Vue-Apollo / GraphQL?

[@academind]

Thank you so much Grant, I'm glad that you're liking the videos! GraphQL/Apollo is on the "idea list" but I don't have concrete plans right now. Got too many other ongoing projects ;)

[@freedom341]

sir how to include script that will put into body not on head?

[@jaimelimon2465]

Hi Max, where can I initialize Firebase SDK? I am also watching your Udemy course but I want to try it with the SDK. Thank you!

[@_Mafia_]

hey. thanks for introduce the fundamental and usage of nuxt but Nuxt3 is coming!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@academind]

Really cool to read that you like it Abhishek, thank you :)

[@app300ful]

how do i style that green div you have in your very top header so when the page loads i want it to be white.

[@user-ej6wc5cv9s]

Thank you Guy

[@DOM-cc]

this is mofu genius!

[@sadekhossain9566]

What you will see if you see the source code of recipe page and details page? Will the with be available there?

[@zstrizzel]

Another great video Max! So basically, there's no easy way (yet) to do Vue+Nuxt SSR with Laravel?

[@academind]

You can of course build a REST API with Laravel and use that with Vue/Nuxt. I don't really see another use-case. If you got a "normal" Laravel app where you add Vue in some (or all) of its pages to control part of the pages, you're rendering the pages (=> Blade views) on the server anyways. So no server-side rendering is needed in that case

[@brunokd2]

I have a vuejs app and I want to add some SSR features. I've heard about nuxt but haven't done anything with it yet. Would you recommend to add SSR features to vuejs or migrate it entirely to nuxt? Btw, can I just migrate it to nuxt or would I need it to rewrite everything? thanks.

[@argusroot]

Amazing ! thanks :)

[@academind]

Thank you :)

[@shayanaraghi8042]

very great video max

[@academind]

Very happy to read that you like it Shayan, thank you!

[@borystyminski8581]

It's not really true that search crawlers don't see page. Search crawlers are now able to parse and execute javascript, Google uses the time between two network calls to figure out if the page has loaded but SSR is still good for SEO because of you don't need to use polyfils for things like native promises and animations to make Google bot able render the page. Other thing which wasn't mention in video and which is big advantage of SSR is accessibility. Still a lot users use browsers like opera mini which doesn't execute JS 100% correctly and SSR help to render page as we want to. Anyway very good vid, thank you Max.

[@adrian5b]

What happens with components that are not meant to be views/pages? Do those get routes to which we just never place in our html? Or is there a way to block certain Vue files from making it into our route structure? edit: never mind, I just made it to 25:00

[@sergejarko]

you're the man!

[@academind]

YOU are the man Sergej, thanks a lot for your support!

[@Live.EveryDay]

Well good intro toy NuxtJS Max! Can you please tell us what extensions are you using on VSCode for Vuejs ?

[@academind]

Thank you for your great feedback Thomas! I'm using Vetur ( marketplace.visualstudio.com/items?itemName=octref.vetur ) and the material icon theme ( marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ).

[@Live.EveryDay]

Now everything looks great ! Thanks!

[@lordexio]

Really nice video! How did you edit multiple lines at once? Is that a plugin?

[@academind]

Thanks so much! It's a built-in feature of VS Code. Search for "multiple cursors" or just "cursor" in the keybinding to find out which shortcuts can help you with that.