Nuxt JS Crash Course
Вставка
- Опубліковано 10 вер 2024
- In this video we will look at Vue.js server side rendering with Nuxt.js. We will build a dadjokes app. This requires at least minimal Vue.js experience.
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelo...
Code:
github.com/bra...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
API Link:
icanhazdadjoke...
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
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! : )
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
Good tutorial. But I think you should have to cover the SSR part also, for which the Nuxt is built.
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
37:40 "that's very... unfunny" actually laughed out loud
thanks brad, you're awesome!!
Very good tutorial even as a beginner I could understand and follow everything 👌
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
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? 🤔
I followed this video today. It still works. Thanks!
Enjoyed this crash course. Well executed. Easy to understand. Thanks
Amazing tutorial ... Thank you Brad ! 11:55 for new versions of Vue ... instead of scaffold us vue
Clear explanation of what Nuxtjs can do. Thanks.
Been waiting this for a long time. Thank you my Lord.
Wow, You are soo fast with everything! I will check out nuxt right now
I don't know anything about Vue or Nuxt but could follow along. Very enjoyable Intro. TQVM Brad!!
Btw, they changed the scaffold keyword. You now have to write "
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.
Amazing as always Keep it rolling Brad 👍 thanks for the great content you provide
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!
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.
So so close...was waiting for an update to Nextjs :)
Brilliant tutorial on Nuxt! Thanks Brad :)
Awesome Brad, thank you for everytime!
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
IM SO FLIPPING HAPPY ABOUT THIS!!!! 🙏🏽
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
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 ;)
That was a very nice crash course! I definitely will use nuxt on my projects.
Brad you are the man. Thanks for this video!
Thanks Brad!
Enjoy Nuxt. Gets you coding with quick results
Folder structure helps keep things organized for easy development
Respect From Pakistan. Huge fan of you and your content.
Amazing! Nuxt should be integrated into Vue itself
agree, the built-in SEO alone, warrants that.
PLEASE NO
why no? @@yotubeaccoutsuperawesome
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 :)
Thank you, man! Great crash course!
nah man this one course was REALLY rushed and i love ur stuff
You read *Nut JS* and so did I 😁😁😁
great tutorial, thanks!
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
Very useful. Thank you!!!
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.
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?
Awesome video. I absolutely love Nuxt.
Hey Brad , I have a problem in wordpress i just can't customize my theme locally is this a process performance problem what do you think .The Processorr: Intel(R) Core(TM) i3-4005U CPU @ 1.70GHz what do you recommand please help me i lost my mind
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.
Great tutorial bro ! God bless you.
hi thanks for the tutorial , just one question , will google search index pages by id of jokes or just the /jokes page ??
Yes, this is what I was looking for😊😊😊
You always on time man, thanks bro👍
when authenticated using nuxtapollo with typescript autharization not working after login even if using apollohelper or set localstorage "apollo-token" manually , not working too, I need a solution .. please ,, thank you for your time ,,😃
Amazing! Keep up the good work.
Very helpful , Thanks
Great course!
Is it just me...this install is not working for me with any of the methods provided - npx, npm, or yarn.
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
Thank you!
Nice. Thank you for this.
Nice course , Amazing . Thanks
Excellent. Thank you!!
Hi Brad, really amazing tutorial but I have one question, which one do you prefer for yourself: Next or Nuxt?
I have little question. I am creating music streaming web app like Spotify. Where i store my audio files and which database is good for that. I know google firebase is great option but can you suggest me any alternative of this.
Thanks for the video
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.
Kindly do a course on Nuxt page transitions :)
Thank you for a good video to learn Nuxt.js😀!!
We can use tag to show client-side only content, huh?
Then how can I render server-side only content?
Thanks
Hi
I got this error when trying to access joke page localhost:3000/jokes/0ga2EdN7prc
Cannot read property '_normalized' of undefined
An error occurred while rendering the page. Check developer tools console for details.
Can we use new vue 3 composition api in nuxt?? If yes then how and is it a good practice??
Thanks
Nuxt and Vuetify create a powerful combo
What for is the underscore in pages/Jokes/_id?
Hello! How about nuxt.js with django and django Django REST Framework? What do you think about integrating them?
Great video! Thanks
Excellent
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.
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
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 :)
Cool stuff thanks brad
thank you for the explanation..
thanks Brad
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?.
Can i migrate my existing vue js website into Nuxt
why you no use rem instead of px everywhere?
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 !!!
Bro, you are awesome!! thanks!!!
great work
so i can put in my cv i'm fullstack now thanks
Hmmm, what is better to a VueJs and ReactJS beginner like me: NuxtJS or NextJS?
Nextjs
Amazing
created() hook not working well with async data, instead use fetch()
Perfect ❤️
Great tutorial, thanks. Loving the jokes too :D
sir how to define that axious get url globally , i mean global api url
You are just amazing
Hi Brad, thanks for this great Nuxt Crash Course! I follow along and try to implement with different API using drupal as backend. What I want to achieve is to make "frienly url" and I can make it because I have it from the API as path alias along with ID, the problem is after clicking the path I need to make another get request by ID. Any trick to achieve this?
Are you going to be doing a Vue front to back with Nuxt and Vuex and/or Laravel?
Yes Vue, maybe Laravel