whenever I heard about some new technology (language / framework) I come to this channel and search for it because Brad always explains the best... Keep it up! Stay Blessed! : )
So excited for this video. Won't be able to watch it until after the day job, but looking forward to it a lot. I'm in process of figuring out a vue build setup for an app I'm working on as a personal project, and I'm sure Nuxt will help. Thanks as always Brad!! (10)
I'm doing a VueJS test for a company and Brad is saving me again with this and the VueJS Crash Course, I use to worked more with React but Vue is great, I think is easier than React also
Yeah, it has all the common operations you need already built into the language, (e.g. two-way data binding, event handling modifiers, e.t.c) so you only need to focus on logic, rather than technical details.
@@lordswaggity1213 working class struggles - You can hear it in the voice and in the stories that Brad tells from time to time. I always like people that don't have an easy road to success: AKA, the working / blue collar class.
@@adamCoder Also not bullshit-speak: Just straight to the point information with proper language without sugar-coating everything with 5$ words nor pretentious crap. And without a 20-30 seconds intro displaying his big house/expensive car/etc.
@@ilijanikolic163 I also buy his udemy django course and when i completed that course i mentioned him in my tweet and thanked him. Money is not everything boy, Development is my passion and i love to learn new technology. I am a landlord and i don't do this for money but i do this bcoz i love to do this ;)
@@awaisraza2285, You didn't get it but nevermind, I didn't expect you to. Also, I don't want to spam this awesome man's channel, it's just that you have the idea, there is Spotify app that you can always take a look at and he made a tutorial already showing you how you should think and organize, but you don't even want to try to do it by yourself cause it's easier just type what he is showing, right? Maybe GitHub repo with all the files will be even better, right? But I understand, you don't want to make money, you are just being passionate...
@@ilijanikolic163 I have built spotify app using core php and Html css and javascript already. I never used angular in past and i don't have any idea about that i just show a demo of that application
I have a feeling that eventually Vue will over take React and Angular eventually since it is supported by the community and not by a single company. If Facebook or Google somehow fail then the frameworks will have to be maintained by those that may not want to update it unlike vue that is maintained by more than one person
Well he did manage to show how routing works with Nuxts directory structure instead of plain vue-router. But he actually bungled his Axios, instead of using/registering its nuxt module he imported plain axios manually. (Which works since plain axios is depended on by nuxt-axios so it will be in his node_modules even when not listed in package-json.) It still is a great video so I'm glad he makes it available for free :)
Hey Brad! Nice course you have made. Thanks. By the way, will you make a video series or crash course on nuxtjs with mongodb and express?That will be a good way to learn about nuxt. Have a good day.
Hey Brad, one question. Why didn't you use the asyncData method in Nuxt? That way you get the jokes rendered on the HTML, because the created() method on Vue is rendered client-side. Just a thought. Great vid!
Thanks Brad. I have just finished your Django dev to deployment course. It was really a practical content and I've got most out of it. But Deploying has still become the hardest part for me :). Can you make only one video how to deploy django project to custom host and connect with custom domain. (I dont mean heroku, aws or digitalocean, I really mean own server. For example Ive bought host and domain name, and how to deploy django project into that server and connect with my own domain). Thanks for all in advance. I really appreciate your effort.
Thank you for you awesome videos :)! I just have a question! When you say that the SSR with NUXT helps improving the SEO. How is it different from having an SPA with modules that also improve the SEO such as: vue-meta?
i had to manually add my layouts folder as, for some reason, mine didnt come built-in. Also had a sort of different folder layout than brad, i dont know what i did wrong, but even the setup was asking different questions. i just went with whatever felt right
Akhi this is an old tutorial. Things change each year. I am facing the same thing. Now (as of Oct 2022), NuxtJS has a different default folder structure upon doing create-nuxt-app
Hey Brad, thanks for the video. I just started a project with Nuxt js yesterday and I am stuck with trying to figure out how to add materialize css with custom jquery to nuxt js without cdn. I will like like you to do a Udemy course on full stack Nuxt with projects. Thanks
Why do you use the lifecycle method "created", when nuxt.js brings an own method for components. async fetch()... which will automatically put itself in the right lifecycle
NuxtJS is all about SSR, which means access remote api and store the data in asyncData, fetch or nuxtServerInit in vuex store, but this tutorial didn't even talk about this, I think Mr. Traversy didn't read the document carefully, this project has no ssr, it is just like a normal vue-cli project !!!
Thanks this is really handy!! It is a bit painful to see a workflow without Typescript, waiting for errors in the browser, but I guess there are good ways to use TypeScript with Vue?.
is there a way to make axios request from serverside so we can render full html before sending to user? this would be much better for seo. I mean when we request /jokes directly all html should be rendered on serverside. but if we client /jokes link from index by using top navigation ajax request should happen on clientside. I imagined nuxt would do that automagiccally
I am working in upgrading an ERP system and I was wondering, is it a good decision to change the Vue project to Nuxt? And please suggest benefits if the answer is yes. Please put in your consideration I don't need SEO since it is an ERP system.
I tried Nuxt and i honestly think it's SO BAAD. Especially after they removed the "special folders" (layouts, assets etc). I understand they want to make less boilerplate code but what they are doing is basically taking away all the control of the project from you. It also does alot of things in its own way which i dont dislike.
Hi Brad, do you have more videos on this topic? So I've been reading up on this, and I am still slightly confused. Does this replace the need for a Server Side language like PHP? Or would/could you still use it in conjunction with a server side language?
This does not replace PHP or any other server-side language. In fact you can use Nuxt.js with Laravel API for back end. Nuxt.js main use is Server-side rendering. Basically, the page gets rendered on the server instead of the user browser. So instead of sending Javacript to render on the user browser it already send the rendered page (html page) from the server. This solve the issue Frameworks like React, Angular and Vue has that when you inspect the site source you don't see the HTML or the content that web crawlers can crawl. Google Crawler can still crawl the content but it takes a lot of resources so google delay your site for later as well the crawling still has issue since it has to crawl Javascript instead of HTML. If you know vue what you see is for example instead of seeing the HTML Template made in Vue component template area.
Great content. Thanks for this tutorial. I have a question. What's the difference between creating a 'computed' property and have a lifecycle method like 'created'? Thank you.
Its because SSR. Axios is a promise and takes some time to fetch the data. That means it doesnt get server side rendered and that means the data is not visible for Google's crawler. When you would click right-click and then on "inspect page" you wont see the data from the axios call
How does state work with Universal? Like how do you get to another page and have state from the previous page other than passing params? Is Vuex only for use with SPA mode? Or is it that on the front end a universal nuxt site behaves like a spa and so the vuex store is preserved between page loads?
whenever I heard about some new technology (language / framework) I come to this channel and search for it because Brad always explains the best... Keep it up! Stay Blessed! : )
the "scaffolding" snippet is now named "vue"
Always read the comments folks
"vuec" in ST with the Vuejs Snippets pkg 😁
.vue to me lol idk why
default ...works too .
I went and made a snippet for scaffold because it wouldn't work for me and now I feel really stupid
I do many tutorials and you're the only one I can do without having to pause every minute as they are doing it too fast, excellent job
And I watching in x5 speed hahahah
as always, Brad explains it pretty straight forward. Wish he could make a video on NuxtJS and Vuex best practices. That would be awesome. Thanks Brad
So excited for this video. Won't be able to watch it until after the day job, but looking forward to it a lot.
I'm in process of figuring out a vue build setup for an app I'm working on as a personal project, and I'm sure Nuxt will help.
Thanks as always Brad!! (10)
I used Nuxt when my vue project got too difficult
Nuxt made it more manageable and approachable
Good tutorial. But I think you should have to cover the SSR part also, for which the Nuxt is built.
37:40 "that's very... unfunny" actually laughed out loud
thanks brad, you're awesome!!
I'm doing a VueJS test for a company and Brad is saving me again with this and the VueJS Crash Course, I use to worked more with React but Vue is great, I think is easier than React also
Yeah, it has all the common operations you need already built into the language, (e.g. two-way data binding, event handling modifiers, e.t.c) so you only need to focus on logic, rather than technical details.
Waiting for your MEVN stack course
I will be starting it soon. I have some other updates to do as well though
@@TraversyMedia Would love a MEVN stack Udemy course as well! I did your MERN DevConnector, would love another different project on MEVN!
yes!!
I like to call it VENoM (Vue + Express + Node + Mongo), just because how cool it sounds :D
@@spiderous Yes its cool
Been waiting this for a long time. Thank you my Lord.
Dig your channel, bro - blue collar vibe with tech skills. I'm much the same. Excelsior to you, mang.
Thanks :)
Blue collar vibe? What gave you that vibe
@@lordswaggity1213 working class struggles - You can hear it in the voice and in the stories that Brad tells from time to time. I always like people that don't have an easy road to success: AKA, the working / blue collar class.
@@adamCoder Also not bullshit-speak: Just straight to the point information with proper language without sugar-coating everything with 5$ words nor pretentious crap. And without a 20-30 seconds intro displaying his big house/expensive car/etc.
@@Skaxarrat What UA-cam video shows an intro displaying their big house? 🤔
Wow, You are soo fast with everything! I will check out nuxt right now
I followed this video today. It still works. Thanks!
Clear explanation of what Nuxtjs can do. Thanks.
I don't know anything about Vue or Nuxt but could follow along. Very enjoyable Intro. TQVM Brad!!
Enjoy Nuxt. Gets you coding with quick results
Folder structure helps keep things organized for easy development
Enjoyed this crash course. Well executed. Easy to understand. Thanks
So so close...was waiting for an update to Nextjs :)
Please build a Spotify type app like you build in 2016 using angular, but now please in vue js. That will be great Brad
Maybe he can also work instead of you, but you will be the one to receive all the credits and money
@@ilijanikolic163 I also buy his udemy django course and when i completed that course i mentioned him in my tweet and thanked him. Money is not everything boy, Development is my passion and i love to learn new technology. I am a landlord and i don't do this for money but i do this bcoz i love to do this ;)
@@awaisraza2285, You didn't get it but nevermind, I didn't expect you to. Also, I don't want to spam this awesome man's channel, it's just that you have the idea, there is Spotify app that you can always take a look at and he made a tutorial already showing you how you should think and organize, but you don't even want to try to do it by yourself cause it's easier just type what he is showing, right? Maybe GitHub repo with all the files will be even better, right? But I understand, you don't want to make money, you are just being passionate...
@@ilijanikolic163 I have built spotify app using core php and Html css and javascript already. I never used angular in past and i don't have any idea about that i just show a demo of that application
@@awaisraza2285 Ok ok, whatever man, keep up with the good copy-pasting ;)
Btw, they changed the scaffold keyword. You now have to write "
I have a feeling that eventually Vue will over take React and Angular eventually since it is supported by the community and not by a single company. If Facebook or Google somehow fail then the frameworks will have to be maintained by those that may not want to update it unlike vue that is maintained by more than one person
Amazing! Nuxt should be integrated into Vue itself
agree, the built-in SEO alone, warrants that.
PLEASE NO
why no? @@yotubeaccoutsuperawesome
Amazing as always Keep it rolling Brad 👍 thanks for the great content you provide
Very good tutorial even as a beginner I could understand and follow everything 👌
IM SO FLIPPING HAPPY ABOUT THIS!!!! 🙏🏽
That was a very nice crash course! I definitely will use nuxt on my projects.
Ekhm... You've missed the most powerfull part of Nuxt.js - Server Side Rendering.
Yeah seriously this was 5 minutes of info about nuxt and 40 of building a random vue application.
Well he did manage to show how routing works with Nuxts directory structure instead of plain vue-router. But he actually bungled his Axios, instead of using/registering its nuxt module he imported plain axios manually. (Which works since plain axios is depended on by nuxt-axios so it will be in his node_modules even when not listed in package-json.)
It still is a great video so I'm glad he makes it available for free :)
Hey Brad! Nice course you have made. Thanks. By the way, will you make a video series or crash course on nuxtjs with mongodb and express?That will be a good way to learn about nuxt. Have a good day.
Brilliant tutorial on Nuxt! Thanks Brad :)
Hey Brad, one question. Why didn't you use the asyncData method in Nuxt? That way you get the jokes rendered on the HTML, because the created() method on Vue is rendered client-side. Just a thought. Great vid!
Respect From Pakistan. Huge fan of you and your content.
Nuxt and Vuetify create a powerful combo
Awesome Brad, thank you for everytime!
Thanks Brad. I have just finished your Django dev to deployment course. It was really a practical content and I've got most out of it. But Deploying has still become the hardest part for me :). Can you make only one video how to deploy django project to custom host and connect with custom domain. (I dont mean heroku, aws or digitalocean, I really mean own server. For example Ive bought host and domain name, and how to deploy django project into that server and connect with my own domain). Thanks for all in advance. I really appreciate your effort.
Brad you are the man. Thanks for this video!
Thank you for you awesome videos :)! I just have a question! When you say that the SSR with NUXT helps improving the SEO. How is it different from having an SPA with modules that also improve the SEO such as: vue-meta?
Thanks man this introduction helped me a lot :)
You always on time man, thanks bro👍
nah man this one course was REALLY rushed and i love ur stuff
Hi Brad, really amazing tutorial but I have one question, which one do you prefer for yourself: Next or Nuxt?
Thank you, man! Great crash course!
You read *Nut JS* and so did I 😁😁😁
Awesome video. I absolutely love Nuxt.
i had to manually add my layouts folder as, for some reason, mine didnt come built-in. Also had a sort of different folder layout than brad, i dont know what i did wrong, but even the setup was asking different questions. i just went with whatever felt right
Akhi this is an old tutorial. Things change each year. I am facing the same thing. Now (as of Oct 2022), NuxtJS has a different default folder structure upon doing create-nuxt-app
Hi Brad, I love your videos. You're an inspiration.
Hey Brad, thanks for the video. I just started a project with Nuxt js yesterday and I am stuck with trying to figure out how to add materialize css with custom jquery to nuxt js without cdn. I will like like you to do a Udemy course on full stack Nuxt with projects. Thanks
Use vuetify
Of course let’s search for „nut“ 😂
Amazing! Keep up the good work.
Thanks Brad!
Kindly do a course on Nuxt page transitions :)
Why do you use the lifecycle method "created", when nuxt.js brings an own method for components. async fetch()... which will automatically put itself in the right lifecycle
Great tutorial bro ! God bless you.
Yes, this is what I was looking for😊😊😊
NuxtJS is all about SSR, which means access remote api and store the data in asyncData, fetch or nuxtServerInit in vuex store, but this tutorial didn't even talk about this, I think Mr. Traversy didn't read the document carefully, this project has no ssr, it is just like a normal vue-cli project !!!
Great tutorial, thanks. Loving the jokes too :D
great tutorial, thanks!
Thanks this is really handy!! It is a bit painful to see a workflow without Typescript, waiting for errors in the browser, but I guess there are good ways to use TypeScript with Vue?.
Are you going to be doing a Vue front to back with Nuxt and Vuex and/or Laravel?
Yes Vue, maybe Laravel
If you dont know what to do a tutorial on in the future, it would be awesome if you could cover victory.js
Great course!
hi thanks for the tutorial , just one question , will google search index pages by id of jokes or just the /jokes page ??
Hmmm, what is better to a VueJs and ReactJS beginner like me: NuxtJS or NextJS?
Nextjs
Very useful. Thank you!!!
Nice. Thank you for this.
made mine a little different and used the image api instead
Thank you for a good video to learn Nuxt.js😀!!
Apparently on the new versions you have to use "vue" instead of "scaffold"
Nice course , Amazing . Thanks
I think we can use react helmet for SEO
Is it just me...this install is not working for me with any of the methods provided - npx, npm, or yarn.
is there a way to make axios request from serverside so we can render full html before sending to user? this would be much better for seo. I mean when we request /jokes directly all html should be rendered on serverside. but if we client /jokes link from index by using top navigation ajax request should happen on clientside. I imagined nuxt would do that automagiccally
Cool stuff thanks brad
I am working in upgrading an ERP system and I was wondering, is it a good decision to change the Vue project to Nuxt? And please suggest benefits if the answer is yes. Please put in your consideration I don't need SEO since it is an ERP system.
Excellent. Thank you!!
I tried Nuxt and i honestly think it's SO BAAD. Especially after they removed the "special folders" (layouts, assets etc).
I understand they want to make less boilerplate code but what they are doing is basically taking away all the control of the project from you.
It also does alot of things in its own way which i dont dislike.
Hi Brad, do you have more videos on this topic? So I've been reading up on this, and I am still slightly confused. Does this replace the need for a Server Side language like PHP? Or would/could you still use it in conjunction with a server side language?
This does not replace PHP or any other server-side language. In fact you can use Nuxt.js with Laravel API for back end.
Nuxt.js main use is Server-side rendering. Basically, the page gets rendered on the server instead of the user browser.
So instead of sending Javacript to render on the user browser it already send the rendered page (html page) from the server.
This solve the issue Frameworks like React, Angular and Vue has that when you inspect the site source you don't see the HTML or the content that web crawlers can crawl. Google Crawler can still crawl the content but it takes a lot of resources so google delay your site for later as well the crawling still has issue since it has to crawl Javascript instead of HTML.
If you know vue what you see is for example instead of seeing the HTML Template made in Vue component template area.
Angular Material Brad
Very helpful , Thanks
Pre-COVID vid, always makes me sad a tad
Like before viewing
Cool! Are you going to remake your mern stack series? I heard you rewritten your code but you didnt update it ...
Great content. Thanks for this tutorial. I have a question. What's the difference between creating a 'computed' property and have a lifecycle method like 'created'? Thank you.
A computed method simply changes the view of the data without mutating the data itself.
Great video! Thanks
What's the reason for using async created() and code after that, instead of the usual axios.get('').then(res => {}) syntax?
Its because SSR. Axios is a promise and takes some time to fetch the data. That means it doesnt get server side rendered and that means the data is not visible for Google's crawler. When you would click right-click and then on "inspect page" you wont see the data from the axios call
Can you please a crash course for nuxt 3 as well?
Finally nuxt😍😍😍
thanks Brad
How does state work with Universal? Like how do you get to another page and have state from the previous page other than passing params? Is Vuex only for use with SPA mode? Or is it that on the front end a universal nuxt site behaves like a spa and so the vuex store is preserved between page loads?
You are just amazing
You da man! Fucking love Nuxt.js
Waiting for your MEVN stack course :x
Nice brother 🔥
awesome. but you could use it with Express?
I was just wondering what's the advantage with Express? My only dependencies now are core-js and nuxt, and the site works :-)
I run with PM2
We can use tag to show client-side only content, huh?
Then how can I render server-side only content?
Thanks
thank you for the explanation..
Bro, you are awesome!! thanks!!!
Thanks for the video
Perfect ❤️
Hi, very nice video for a beginner like me. Could you give me the extensions and the settings you are using in your VSCode. thanks
Excellent