Nuxt JS Crash Course

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 พ.ย. 2024

ความคิดเห็น • 231

  • @hamzafaysal909
    @hamzafaysal909 5 ปีที่แล้ว +35

    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! : )

  • @apefu
    @apefu 4 ปีที่แล้ว +139

    the "scaffolding" snippet is now named "vue"

    • @BaaicNotBike
      @BaaicNotBike 4 ปีที่แล้ว +8

      Always read the comments folks

    • @adrient104
      @adrient104 4 ปีที่แล้ว

      "vuec" in ST with the Vuejs Snippets pkg 😁

    • @dawnbugay7094
      @dawnbugay7094 4 ปีที่แล้ว

      .vue to me lol idk why

    • @lubomirhorvath823
      @lubomirhorvath823 3 ปีที่แล้ว

      default ...works too .

    • @adityabhatia7503
      @adityabhatia7503 3 ปีที่แล้ว

      I went and made a snippet for scaffold because it wouldn't work for me and now I feel really stupid

  • @mattiehoare
    @mattiehoare 4 ปีที่แล้ว +1

    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

    • @sanderluis3652
      @sanderluis3652 4 ปีที่แล้ว

      And I watching in x5 speed hahahah

  • @TechyEra
    @TechyEra 3 ปีที่แล้ว +11

    Good tutorial. But I think you should have to cover the SSR part also, for which the Nuxt is built.

  • @justaboutanything8973
    @justaboutanything8973 3 ปีที่แล้ว +2

    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

  • @jdwoods2008
    @jdwoods2008 5 ปีที่แล้ว +6

    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)

    • @garnurikta3982
      @garnurikta3982 5 ปีที่แล้ว

      I used Nuxt when my vue project got too difficult
      Nuxt made it more manageable and approachable

  • @ralfderijcke
    @ralfderijcke 4 ปีที่แล้ว

    Clear explanation of what Nuxtjs can do. Thanks.

  • @trunkmak_xo
    @trunkmak_xo ปีที่แล้ว +1

    Very good tutorial even as a beginner I could understand and follow everything 👌

  • @sharonhasegawa4407
    @sharonhasegawa4407 4 ปีที่แล้ว +16

    37:40 "that's very... unfunny" actually laughed out loud
    thanks brad, you're awesome!!

  • @mtony811
    @mtony811 3 ปีที่แล้ว

    I followed this video today. It still works. Thanks!

  • @digigoliath
    @digigoliath 4 ปีที่แล้ว

    I don't know anything about Vue or Nuxt but could follow along. Very enjoyable Intro. TQVM Brad!!

  • @brnheavymetal
    @brnheavymetal 3 ปีที่แล้ว

    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

    • @praisedare
      @praisedare 2 ปีที่แล้ว +1

      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.

  • @Geomaverick124
    @Geomaverick124 5 ปีที่แล้ว +9

    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

  • @shachaha
    @shachaha 5 ปีที่แล้ว +1

    Wow, You are soo fast with everything! I will check out nuxt right now

  • @lukass7156
    @lukass7156 4 ปีที่แล้ว +3

    Btw, they changed the scaffold keyword. You now have to write "

  • @taariqhendricks7590
    @taariqhendricks7590 3 ปีที่แล้ว +1

    Enjoyed this crash course. Well executed. Easy to understand. Thanks

  • @garnurikta3982
    @garnurikta3982 5 ปีที่แล้ว

    Enjoy Nuxt. Gets you coding with quick results
    Folder structure helps keep things organized for easy development

  • @adamCoder
    @adamCoder 5 ปีที่แล้ว +30

    Dig your channel, bro - blue collar vibe with tech skills. I'm much the same. Excelsior to you, mang.

    • @TraversyMedia
      @TraversyMedia  5 ปีที่แล้ว +2

      Thanks :)

    • @lordswaggity1213
      @lordswaggity1213 5 ปีที่แล้ว +2

      Blue collar vibe? What gave you that vibe

    • @adamCoder
      @adamCoder 5 ปีที่แล้ว +3

      @@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.

    • @Skaxarrat
      @Skaxarrat 5 ปีที่แล้ว +4

      @@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.

    • @royalflush13
      @royalflush13 5 ปีที่แล้ว

      @@Skaxarrat What TH-cam video shows an intro displaying their big house? 🤔

  • @iskendev
    @iskendev 5 ปีที่แล้ว +89

    Waiting for your MEVN stack course

    • @TraversyMedia
      @TraversyMedia  5 ปีที่แล้ว +22

      I will be starting it soon. I have some other updates to do as well though

    • @wingsaber629
      @wingsaber629 5 ปีที่แล้ว +7

      @@TraversyMedia Would love a MEVN stack Udemy course as well! I did your MERN DevConnector, would love another different project on MEVN!

    • @dyunior
      @dyunior 5 ปีที่แล้ว +1

      yes!!

    • @spiderous
      @spiderous 5 ปีที่แล้ว +22

      I like to call it VENoM (Vue + Express + Node + Mongo), just because how cool it sounds :D

    • @avetman9682
      @avetman9682 5 ปีที่แล้ว

      @@spiderous Yes its cool

  • @rifatspk
    @rifatspk 5 ปีที่แล้ว +4

    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.

  • @kapa4208
    @kapa4208 5 ปีที่แล้ว +2

    Been waiting this for a long time. Thank you my Lord.

  • @nabeelyousafpasha
    @nabeelyousafpasha 3 ปีที่แล้ว

    Respect From Pakistan. Huge fan of you and your content.

  • @NewtonJR1987
    @NewtonJR1987 4 ปีที่แล้ว

    That was a very nice crash course! I definitely will use nuxt on my projects.

  • @BrunoDeAngelis
    @BrunoDeAngelis 5 ปีที่แล้ว +4

    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!

  • @happyoe398
    @happyoe398 5 ปีที่แล้ว +1

    Amazing as always Keep it rolling Brad 👍 thanks for the great content you provide

  • @awaisraza2285
    @awaisraza2285 5 ปีที่แล้ว +17

    Please build a Spotify type app like you build in 2016 using angular, but now please in vue js. That will be great Brad

    • @ilijanikolic163
      @ilijanikolic163 5 ปีที่แล้ว +1

      Maybe he can also work instead of you, but you will be the one to receive all the credits and money

    • @awaisraza2285
      @awaisraza2285 5 ปีที่แล้ว +1

      @@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 ;)

    • @ilijanikolic163
      @ilijanikolic163 5 ปีที่แล้ว +1

      @@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...

    • @awaisraza2285
      @awaisraza2285 5 ปีที่แล้ว

      @@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

    • @ilijanikolic163
      @ilijanikolic163 5 ปีที่แล้ว

      ​@@awaisraza2285 Ok ok, whatever man, keep up with the good copy-pasting ;)

  • @Geomaverick124
    @Geomaverick124 5 ปีที่แล้ว +4

    So so close...was waiting for an update to Nextjs :)

  • @blakestokes7690
    @blakestokes7690 2 ปีที่แล้ว

    Brad you are the man. Thanks for this video!

  • @stevendornan7979
    @stevendornan7979 5 ปีที่แล้ว +1

    Brilliant tutorial on Nuxt! Thanks Brad :)

  • @Alessandro-nq3tm
    @Alessandro-nq3tm 5 ปีที่แล้ว +18

    Amazing! Nuxt should be integrated into Vue itself

  • @armanamini1450
    @armanamini1450 2 ปีที่แล้ว

    nah man this one course was REALLY rushed and i love ur stuff

  • @NerdyKatsChannel
    @NerdyKatsChannel 5 ปีที่แล้ว +2

    IM SO FLIPPING HAPPY ABOUT THIS!!!! 🙏🏽

  • @khamdamov
    @khamdamov 5 ปีที่แล้ว

    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.

  • @wotan91
    @wotan91 5 ปีที่แล้ว +17

    Ekhm... You've missed the most powerfull part of Nuxt.js - Server Side Rendering.

    • @matthewlee8001
      @matthewlee8001 5 ปีที่แล้ว +9

      Yeah seriously this was 5 minutes of info about nuxt and 40 of building a random vue application.

    • @jnbsp3512
      @jnbsp3512 5 ปีที่แล้ว +2

      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 :)

  • @garnurikta3982
    @garnurikta3982 5 ปีที่แล้ว

    Nuxt and Vuetify create a powerful combo

  • @ErisonSilvaa
    @ErisonSilvaa 3 ปีที่แล้ว

    Thanks man this introduction helped me a lot :)

  • @AzeezGafar
    @AzeezGafar 4 ปีที่แล้ว +1

    Awesome Brad, thank you for everytime!

  • @theavazov
    @theavazov 2 ปีที่แล้ว

    Hi Brad, really amazing tutorial but I have one question, which one do you prefer for yourself: Next or Nuxt?

  • @HunterNunnery
    @HunterNunnery 5 ปีที่แล้ว

    Awesome video. I absolutely love Nuxt.

  • @adekorir
    @adekorir 5 ปีที่แล้ว

    Hi Brad, I love your videos. You're an inspiration.

  • @mrMinstrel
    @mrMinstrel 5 ปีที่แล้ว +2

    Thanks Brad!

  • @maskman4821
    @maskman4821 4 ปีที่แล้ว

    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 !!!

  • @lordswaggity1213
    @lordswaggity1213 5 ปีที่แล้ว +2

    You read *Nut JS* and so did I 😁😁😁

  • @Mishawitcher
    @Mishawitcher 5 ปีที่แล้ว +1

    Thank you, man! Great crash course!

  • @mahdizerara9217
    @mahdizerara9217 5 ปีที่แล้ว +4

    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?

  • @lakshmangope8963
    @lakshmangope8963 5 ปีที่แล้ว +1

    Amazing! Keep up the good work.

  • @clep0clep23
    @clep0clep23 2 ปีที่แล้ว

    Great course!

  • @mateusspadari5171
    @mateusspadari5171 4 ปีที่แล้ว +1

    Great tutorial bro ! God bless you.

  • @kapilchauhan7954
    @kapilchauhan7954 4 ปีที่แล้ว

    Yes, this is what I was looking for😊😊😊

  • @PeterAkaliro
    @PeterAkaliro 5 ปีที่แล้ว

    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

  • @emmanuelkaranja1853
    @emmanuelkaranja1853 4 ปีที่แล้ว +1

    Kindly do a course on Nuxt page transitions :)

  • @mabrurahmed3304
    @mabrurahmed3304 2 ปีที่แล้ว +1

    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

    • @webtutorials4279
      @webtutorials4279 2 ปีที่แล้ว

      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

  • @Deltanova93
    @Deltanova93 3 ปีที่แล้ว +1

    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

  • @perfect.stealth
    @perfect.stealth 2 ปีที่แล้ว

    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.

  • @glennmathewgarma8565
    @glennmathewgarma8565 2 ปีที่แล้ว

    Very useful. Thank you!!!

  • @gergesnady557
    @gergesnady557 2 ปีที่แล้ว

    Nice course , Amazing . Thanks

  • @huanshao2165
    @huanshao2165 4 ปีที่แล้ว +1

    great tutorial, thanks!

  • @PlayRiteProductions
    @PlayRiteProductions 5 ปีที่แล้ว +3

    You always on time man, thanks bro👍

  • @duketranslucent3rd
    @duketranslucent3rd 3 ปีที่แล้ว

    Nice. Thank you for this.

  • @DaveCollison
    @DaveCollison 4 ปีที่แล้ว

    Excellent. Thank you!!

  • @DI3GOskill
    @DI3GOskill 4 ปีที่แล้ว

    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?.

  • @troylan7914
    @troylan7914 3 ปีที่แล้ว

    Very helpful , Thanks

  • @trunkmak_xo
    @trunkmak_xo ปีที่แล้ว +1

    Of course let’s search for „nut“ 😂

  • @twjr4547
    @twjr4547 5 ปีที่แล้ว

    Cool stuff thanks brad

  • @turtleyoda7703
    @turtleyoda7703 4 ปีที่แล้ว

    Great video! Thanks

  • @patrickcunningham4197
    @patrickcunningham4197 3 ปีที่แล้ว

    Great tutorial, thanks. Loving the jokes too :D

  • @mahdimousavi3470
    @mahdimousavi3470 3 ปีที่แล้ว

    Excellent

  • @maulanaluckyyulianto8141
    @maulanaluckyyulianto8141 4 ปีที่แล้ว

    thanks Brad

  • @habibi9497
    @habibi9497 4 ปีที่แล้ว

    Thank you for a good video to learn Nuxt.js😀!!

  • @derricknjoroge2494
    @derricknjoroge2494 4 ปีที่แล้ว

    You are just amazing

  • @tehseenullah215
    @tehseenullah215 3 ปีที่แล้ว

    great work

  • @elliot_yoyo
    @elliot_yoyo 4 ปีที่แล้ว

    Thanks for the video

  • @brucktafesse4799
    @brucktafesse4799 4 ปีที่แล้ว

    Thanks

  • @gopinathkrm58
    @gopinathkrm58 5 ปีที่แล้ว

    Angular Material Brad

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm 4 ปีที่แล้ว

    Apparently on the new versions you have to use "vue" instead of "scaffold"

  • @Geomaverick124
    @Geomaverick124 5 ปีที่แล้ว +1

    Are you going to be doing a Vue front to back with Nuxt and Vuex and/or Laravel?

  • @angelhdzdev
    @angelhdzdev 11 หลายเดือนก่อน

    Nuxt 3 course? 👀💚🔥

  • @alpercaner2923
    @alpercaner2923 5 ปีที่แล้ว +1

    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

  • @AhmedEssam-lv5vn
    @AhmedEssam-lv5vn 5 ปีที่แล้ว

    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.

  • @Rider0fBuffalo
    @Rider0fBuffalo 2 ปีที่แล้ว

    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?

  • @therockconnor
    @therockconnor 5 ปีที่แล้ว +1

    Any chance of a flutter crash course?

  • @hichemghoualmi739
    @hichemghoualmi739 3 ปีที่แล้ว

    excellent video

  • @levieraf
    @levieraf 5 ปีที่แล้ว

    Bro, you are awesome!! thanks!!!

  • @unknownsoul7043
    @unknownsoul7043 3 ปีที่แล้ว

    made mine a little different and used the image api instead

  • @MecegguemMohamed
    @MecegguemMohamed 4 ปีที่แล้ว

    hi thanks for the tutorial , just one question , will google search index pages by id of jokes or just the /jokes page ??

  • @TechDetour
    @TechDetour 4 ปีที่แล้ว +1

    Perfect ❤️

  • @abazur7742
    @abazur7742 5 ปีที่แล้ว

    Cool! Are you going to remake your mern stack series? I heard you rewritten your code but you didnt update it ...

  • @vlad11112
    @vlad11112 5 ปีที่แล้ว

    If you dont know what to do a tutorial on in the future, it would be awesome if you could cover victory.js

  • @khizer3528
    @khizer3528 2 ปีที่แล้ว

    Hi Brad ,
    Can we expect Nuxt 2022 video ?

  • @josuebarros-desenvolvedorw2490
    @josuebarros-desenvolvedorw2490 4 ปีที่แล้ว

    Hmmm, what is better to a VueJs and ReactJS beginner like me: NuxtJS or NextJS?

  • @shihabjamil9093
    @shihabjamil9093 2 ปีที่แล้ว

    Can you please a crash course for nuxt 3 as well?

  • @Decoy1982
    @Decoy1982 5 ปีที่แล้ว

    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?

    • @cla1814
      @cla1814 5 ปีที่แล้ว

      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.

  • @chaayparcharcha
    @chaayparcharcha 3 ปีที่แล้ว

    Amazing

  • @OyedeleSegunfunmi
    @OyedeleSegunfunmi 5 ปีที่แล้ว

    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.

    • @bazzle_brush
      @bazzle_brush 4 ปีที่แล้ว

      A computed method simply changes the view of the data without mutating the data itself.

  • @gregorymurunga8046
    @gregorymurunga8046 5 ปีที่แล้ว

    thank you for the explanation..

  • @abelmurua6980
    @abelmurua6980 3 ปีที่แล้ว

    Hello! How about nuxt.js with django and django Django REST Framework? What do you think about integrating them?

  • @yalasta
    @yalasta 5 ปีที่แล้ว

    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?

  • @RahulAhire
    @RahulAhire 4 ปีที่แล้ว

    I think we can use react helmet for SEO

  • @humanontheinternet6510
    @humanontheinternet6510 5 ปีที่แล้ว

    Finally nuxt😍😍😍

  • @aydinacar9277
    @aydinacar9277 5 ปีที่แล้ว +1

    awesome. but you could use it with Express?

    • @AI-lb5qy
      @AI-lb5qy 3 ปีที่แล้ว

      I was just wondering what's the advantage with Express? My only dependencies now are core-js and nuxt, and the site works :-)

    • @AI-lb5qy
      @AI-lb5qy 3 ปีที่แล้ว

      I run with PM2