Vue JS 3 Tutorial for Beginners #4 - The Vue CLI & Bigger Projects (part 1)

Поділитися
Вставка
  • Опубліковано 10 вер 2024

КОМЕНТАРІ • 177

  • @mattgic42
    @mattgic42 3 роки тому +102

    I once said it before that I could not wrap my head around React until I watched your videos on it the one day earlier this year, and the same holds true with Vue. You, sir, are a Godsend. You are very much appreciated by me. The way you thoroughly and uniquely demonstrate and explain things is excellent and unmatched. Without the videos from you and Traversy Media, the world would not be the same.

    • @NetNinja
      @NetNinja  3 роки тому +10

      Hey Matthew thanks so much :)

    • @mattgic42
      @mattgic42 3 роки тому +1

      @@NetNinja No problem. Thank you!

    • @shivansh709
      @shivansh709 2 роки тому

      Yessss

    • @watevakid
      @watevakid Рік тому

      100000% agree with this!

    • @ibrahimaziz224
      @ibrahimaziz224 2 місяці тому

      This is so true….facts indeed🎊

  • @pewolo
    @pewolo 3 роки тому +68

    Finally landed on a real Vue Js Tutorial.
    Thank You Sir ,for the great work

  • @ManBrunchCrew
    @ManBrunchCrew 2 роки тому +11

    Having to quickly learn Vue for an upcoming project at work, and this series has helped a ton. Thanks for all the hard work. It is appreciated!

  • @afroshaggy657
    @afroshaggy657 8 місяців тому +2

    The music during the install was a nice touch

  • @alexandrk.4321
    @alexandrk.4321 Рік тому +1

    That "boo" makes me smile) Thank you for tutorial !
    As a backend dev with no js experience I feel so comfortable

    • @NetNinja
      @NetNinja  Рік тому

      Happy to hear that! :) thank you

  • @chibuezevince
    @chibuezevince Рік тому +1

    I have been saving similar wonderful videos like this one.
    I just checked to find out that more than half of it are from this channel.
    I am addicted. ❤️

    • @NetNinja
      @NetNinja  Рік тому

      Great to hear! thanks Vincent :)

  • @joelw3769
    @joelw3769 3 роки тому +7

    Master Shaun. after watch a few of your tutorials in your channel. just take my money. I am buying all your tutorials from udemy. that's it buddy. the best master in the ninja clan.

  • @akinoreiki
    @akinoreiki 3 роки тому +8

    Thanks for making this easy to understand. I worked an angular project previously, and it's definitely similar, but this tutorial is much easier to follow than the others I've read in the past. I will definitely be sticking to Vue thanks to you!

    • @chizuru1999
      @chizuru1999 2 роки тому +1

      I like to call Vue as "Modern AngularJS" 😸

  • @ThomasHezel1
    @ThomasHezel1 10 місяців тому +1

    Very high pedagogical quality! Pace, details, side information 10 points out of 10!

    • @NetNinja
      @NetNinja  10 місяців тому

      Thanks Thomas!

  • @ricko13
    @ricko13 3 роки тому +4

    It's 3am here, but so good so far, thank you!

  • @mareanorton3448
    @mareanorton3448 2 роки тому +1

    Still loving your tutorial. Every thing actually works, unlike some other tutorials.

  • @vincenthao6736
    @vincenthao6736 2 роки тому +1

    Thank you so much for creating this series. Really appreciate how you dumbed down everything and assumed little prior knowledge (that's me!)

  • @raedeguzman9664
    @raedeguzman9664 2 роки тому +1

    Watched some few vue tutorial, even in vue mastery.
    So far this is the best step by step tutorial for me.
    Thank you so much.

    • @marsdwarf
      @marsdwarf Рік тому

      Totally agree! This course is much more beginner friendly and easier to follow than Vue Mastery.

  • @tubester358
    @tubester358 Рік тому

    I think it's useful to mention that naming conventions aren't just a matter of "You do you" but that we should get familiar with conventions if we at all plan to share the code with others or plan to work in a dev team since the point of convention is to make it more readable for devs in general. Like, instead of suggesting it doesn't matter whether one names a component with a capital letter, it's more useful to say that naming it with a capital letter more clearly differentiates it from regular tags & files and identifies it as a Vue component whenever a dev familiar with vue or some other third-party library looks at the src files.
    Other than that, I'm liking the straight-to-the-point course so far (coming from some familiarity with React)

  • @mohammadghandour4756
    @mohammadghandour4756 2 роки тому

    Nah bro !!!
    If this is your free course, that is already more useful than I actually expected, I wonder how would your paid courses be !!
    I've never seen a youtuber explains every little detail for his viewers, you literally talk like you're one of us (Beginners and new to the topic), which makes us really understand every little thing we wanna know.
    A 'thank you' isn't really enough !
    Keep up the amazing work man !!
    Appreciated

  • @crimsonhawk467
    @crimsonhawk467 2 роки тому +1

    Absolutely amazing tutorial! I am coming from angular. This is the best tutorial on vue!

  • @RR-et6zp
    @RR-et6zp 2 роки тому

    It really started clicked with the multiple components and it's confident to hear when you say you'll talk about it in later videos, BUT it would be cool to say the project plan at the start of the first video so viewers get to see when they're gonna learn what and how it's connected, because your content and teaching style are brilliant

  • @learnsimple4592
    @learnsimple4592 3 роки тому +8

    Thanks Shaun, bought this course one day after release. Also learnt modern JavaScript from your udemy course. You make great content and I enjoy watching it. Maybe Vuex 4 with Vue 3 next ?

  • @codypellom1256
    @codypellom1256 Рік тому +2

    This video series is absolutely LIT! You really break down each concept and I really feel like I am learning more and more as the series continues. I will definitely consider buying your Udemy course. I am thoroughly impressed with your attention to detail and really understanding how to explain these things. I have worked with OOP JS Frameworks in the past but I could never really understand react other than building basic SPAs. With these videos I am starting to feel like I understand the basics of this framework and can see the appeal. I must say, I really prefer Vue over Angular or React. Vue is way easier to understand IMO and Im loving it so far.

  • @jimos9878
    @jimos9878 10 місяців тому

    you should teach in a high school, college or whatever if you don't already do my friend. your explanation, examples and the understanding you provide of the functionalities are on point!!!

    • @NetNinja
      @NetNinja  10 місяців тому

      Thanks, that means a lot :)

  • @push2me936
    @push2me936 Рік тому +1

    Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!

  • @faigbagirov8118
    @faigbagirov8118 3 роки тому +1

    Yes, It's a best vue tutorial I have ever seen!

  • @liliabekuzinaensosense8987
    @liliabekuzinaensosense8987 11 місяців тому

    Omg! Best teacher ever! Will deffinately buy your courses in Udemy!

  • @morrgash
    @morrgash 2 роки тому +4

    What an amazing tutorial, thank you for taking the time to create it!

  • @parthipankalayini8
    @parthipankalayini8 3 роки тому +4

    Can anyone help me , when I typed vue create it is throwing error -: cb.apply is not a function and it is warned me I am using outdated npm version but I have npm 7.6.1(latest when I am typing this comment) please help me ¡¡¡

  • @shaikhahmaasher979
    @shaikhahmaasher979 3 роки тому +2

    Thanks a lot Shawn and another series of Vuejs with TS will be appreciated

  • @chadvise3308
    @chadvise3308 Рік тому

    you learn this so smooth that i think its ez like learning html
    thank you so much

    • @NetNinja
      @NetNinja  Рік тому +1

      You're very welcome! :)

  • @SLADEDAMONSTA_
    @SLADEDAMONSTA_ 2 роки тому

    These have been the best tutorials! You’re a saint and a scholar

  • @christersin7934
    @christersin7934 3 роки тому +2

    Thank you sir, and this is my another small side project to done.

  • @LinuxForLife
    @LinuxForLife 3 роки тому +1

    Best explanations about Vue. Thanks.

  • @fredpourlesintimes
    @fredpourlesintimes 2 роки тому

    Interesting templating system.
    I just hope that it won't be too heavy, at the end, and really valuable to create a strong, reliable, website structure.

  • @ayabo1192
    @ayabo1192 8 місяців тому

    Very very well explained!! Thank you so much for this series!

    • @NetNinja
      @NetNinja  8 місяців тому

      Glad it was helpful! :) thanks for watching

  • @AsenovMiroslav
    @AsenovMiroslav 3 роки тому +1

    Thanks Shaun! Super clear explanation!

  • @lukasluftlaufer1093
    @lukasluftlaufer1093 3 роки тому

    Already learned so much from you in these previous videos! Thank you so much!!!

  • @sanjoykumardhar9491
    @sanjoykumardhar9491 3 роки тому +3

    Waiting for the next tutorial 😍

  • @EnizeCA
    @EnizeCA Рік тому

    bro i just watched more than 1 hours of this series and haven't even noticed

  • @daliusbeckjr.3918
    @daliusbeckjr.3918 Рік тому +3

    will there be an updated version of this tutorial to the latest vue.js? just curious to know since you are an awesome at explaining vue

    • @Taumee412
      @Taumee412 11 місяців тому +2

      I would love that too! An updated version of this course with vue + vite would be cool! No one explains as good as this guy! :)

    • @sir1usbl4ck333
      @sir1usbl4ck333 11 місяців тому

      Please

  • @k3vinshum
    @k3vinshum 2 роки тому

    Great teacher. The way u deliver it is A*

  • @romeshjayawardene3551
    @romeshjayawardene3551 2 роки тому

    thank you so much for this great series, provided to us Free of charge :)

  • @borjovsky3164
    @borjovsky3164 Рік тому

    UA-cam should have an automatic like button...

  • @nooitniets
    @nooitniets Рік тому +1

    this man is an absolute chad

  • @hongernest9519
    @hongernest9519 3 роки тому

    just get vue3 course in udemy and ready to become a ninja, waiting for VueX tutorial

  • @phillipdavis6021
    @phillipdavis6021 2 роки тому +2

    Hi all,
    I've been working on a Vue project with this tutorial as a reference and was having a ton of fun, thinking "Maybe I like frontend a lot more than I thought I did,"
    when suddenly Vue stopped responding to changes in my code. Having done nothing different from the tutorial in terms of setup, I've tried quitting processes, rerunning "npm run serve", even rebooting my computer repeatedly, and absolutely nothing the Vue page to register a change in my code (I'm getting an error about a variable that no longer exists in my source)"
    If anyone offers a working solution I'd really appreciate it.

  • @technics6215
    @technics6215 7 місяців тому

    I don't understand why there is CSS code everywhere in initial Vue project. Two css files in assets, some CSS in App.vue, another CSS in AboutView... Is this normal in Vue development?

  • @maxosall6972
    @maxosall6972 3 роки тому +1

    Thank you so much, this is exciting

  • @ahmedyoussef7968
    @ahmedyoussef7968 Рік тому

    very helpufull and very clear
    thank you man
    💗

  • @PrabinParajuli
    @PrabinParajuli 3 роки тому +1

    Thank you very much for the tutorial. :) Definitely gonna purchase the full course after I complete this from UA-cam..

    • @NetNinja
      @NetNinja  3 роки тому

      Thanks so much, hope you enjoy it! :)

  • @anhh2130
    @anhh2130 3 роки тому

    Love your detailed explanation. I Will get your full course on Udemy.

  • @programmerhp7736
    @programmerhp7736 Рік тому

    why when i create vue project with cli its taking so much time to finish?

  • @majdibrahem1399
    @majdibrahem1399 2 роки тому

    you are rock bro

  • @wcdeich4
    @wcdeich4 Рік тому

    Why does Vue produce dist/js/152.js and dist/js/187.js files? Even when I turn off chunk splitting, I can't stop it from producing 2 extra files, dist/js/152.js and dist/js/187.js.

  • @thenoja176
    @thenoja176 3 роки тому +1

    we need a nuxt js tutorial shaun

  • @deejayerick
    @deejayerick 3 роки тому

    Muchas gracias, one more for my personal collection!...

  • @user-ss2jr8ss8l
    @user-ss2jr8ss8l 2 роки тому

    Better than any university

  • @Raju917707
    @Raju917707 2 роки тому

    Expecting more videos from you

  • @shedytaieb1083
    @shedytaieb1083 Рік тому

    well bro, I ve been always a backend developer, I could never grasp the frontend logic, I ve worked with databases, devops pipeline, messaging services, kubernetes and anything but the frontend technologies, and for once, I started to get it, I am not sure if it's vue that's is just light weight and simple or your pedagogy but thank you very much

    • @NetNinja
      @NetNinja  Рік тому

      Awesome to hear that Shedy :)

  • @michaels.7562
    @michaels.7562 9 місяців тому

    Great tutorial when following just the video. Unfortunately the older lesson branches seem to have be been removed from the GitHub repo or are stale.

  • @GurovDmitriy
    @GurovDmitriy 3 роки тому

    Excellent learning skills thanks!

  • @jumbo999614
    @jumbo999614 3 роки тому +1

    21:04 Anyone got error "missing space before function parenthesis? I have to write "data ()". If I write "data()", it throws the error.
    The similar problem happens if I have extra white spaces. Why Vue so strict?

    • @learnsimple4592
      @learnsimple4592 3 роки тому

      It doesn’t show that for me, but I usually leave a space. It might be the linter. I don’t really know. But make sure you didn’t install (enable) the linter/formatter

    • @jumbo999614
      @jumbo999614 3 роки тому +1

      @@learnsimple4592 Thank you for your help. I searched internet and found out that it was ESlint that caused the problem.

    • @learnsimple4592
      @learnsimple4592 3 роки тому

      @@jumbo999614 you’re welcome

  • @mohammedbasith2898
    @mohammedbasith2898 3 роки тому

    You're the best bro 🔥🔥🔥🔥

  • @eddykei6330
    @eddykei6330 3 роки тому +1

    Hey, first thank you for this amazing tutorial. I got a question about the project architecture. Is VUEJS based on MVVM? Ive just done MVC and MVP in my life and im a bit concerned about MVVM. Do i need to learn how the whole MVVM architecture works or ill be just fine if I finish the tutorial?

  • @kyteinsky
    @kyteinsky 3 роки тому

    I had one question: In some Vue tutorial (I don't remember) I saw using "v-show" is more efficient that using "v-if" because v-show uses css display property. I used this on modals but in the teleport tag this did not work, both the modals showed even with the showModal === false. Can you help me out here why v-show doesn't work as it should in teleport tag?

  • @JohanNing-lf5so
    @JohanNing-lf5so 3 роки тому

    Thank you very much.

  • @ataraxia0420
    @ataraxia0420 3 роки тому +1

    I'm getting an error inside App.vue inside template tag from Modal tag. It says "The template root requires exactly one element.eslint-plugin-vue" but still works fine, the red underline just bothers me.

    • @raz0229
      @raz0229 3 роки тому +1

      LOL! Same. Took me 10 minutes to realize it can just be ignored

    • @ataraxia0420
      @ataraxia0420 3 роки тому

      @@raz0229 fixed it by updating the visual studio. lol

    • @jeffschaefer4827
      @jeffschaefer4827 3 роки тому

      @@ataraxia0420 I'm running into the same issue. What did you update in Visual Studio specifically to fix it? I'm using VSCode.

    • @ataraxia0420
      @ataraxia0420 3 роки тому

      @@jeffschaefer4827 I updated the vscode itself or you can just download it again from their website and reinstall it.

    • @dfcw
      @dfcw 3 роки тому

      I have this issue with latest version of vsCode.

  • @helgurdazizmirza7875
    @helgurdazizmirza7875 Рік тому

    There is no demonstration of how the files in the project will communicate to each other?

  • @zealtypedcode3119
    @zealtypedcode3119 3 роки тому

    So excited thank you I would be grateful if you also do after this course vue native or ionic vue

  • @guilhemlinde
    @guilhemlinde 2 роки тому

    Top quality content. Thanks a lot.

  • @yadude101
    @yadude101 3 роки тому

    @26:00 i heard that in reactjs it is better to use useRef instead of queryselector

  • @abrotherinchrist
    @abrotherinchrist Рік тому

    Why use Powershell instead of the terminal in VScode?

  • @adriatic123
    @adriatic123 2 роки тому +1

    I always laugh when somebody says you can learn Vue in a week. It shows how modest is their knowledge. For using full features of the Vue environment one has to know javascript excellently, and that alone is a comprehensive task to accomplish. Then and only then one should go to learn Vue. After 5 years I am still learning new things in this excellent framework called Vue js. With version 3 I humbly think it is the most powerful front-end framework there is, for any task.

    • @cagn154
      @cagn154 2 роки тому

      When I followed the course, I found that I lacked the basic knowledge of js. While learning new knowledge, I also had to go back and supplement the basic knowledge.

  • @tochukwusamuel1424
    @tochukwusamuel1424 3 роки тому

    Please how do I add meta tag like title, description in this current vue 3

  • @ch4dix
    @ch4dix 3 роки тому

    I have to wonder why these topics aren't discussed in detail in the vue-cli docs. It just vague gives you a brief overview of the folders and files at the end of the docs. Did I miss something?

  • @shoyusufsiddiqov3329
    @shoyusufsiddiqov3329 3 роки тому

    like before watching

  • @sheriffcrandy
    @sheriffcrandy 3 роки тому

    19:39 when I save I get an error on the localHost page that says: The "HelloWorld" component has been registered but not used. pls help :(

    • @sheriffcrandy
      @sheriffcrandy 3 роки тому +1

      I just fixed the problem, on line 10 in the App.vue file, change components to component

  • @ph4746
    @ph4746 2 роки тому

    I'm Japanese!🇯🇵
    Thank you for creating this video😁
    i have a question.Why can I use Vue-CLI even though i haven’t installed vue?Does Vue-CLI contains Vue?

  • @mullla1ya
    @mullla1ya 3 роки тому

    You forgot to mention sibling components. Header.vue; Article.vue; Footer.vue are all siblings to each other. So Content.vue and Comments.vue are siblings to each other as well.
    You're doing a great job! I like this video very much! So nice diction, very understandable. And you making things really easy! I wish I could find you 2 weeks ago.

  • @wattvisuddhimagga9226
    @wattvisuddhimagga9226 3 роки тому

    if i want to give value to components how i can give it?

  • @fido6779
    @fido6779 10 місяців тому

    what do you use keyboard?)

  • @asibe_cheta
    @asibe_cheta 5 місяців тому

    Hi, great so far, however, I got stuck at 24:50 on installing the project dependencies. Please, is there a guide on how to do this? I am totally lost, thanks.

    • @sfybskot
      @sfybskot 4 місяці тому

      npm install

    • @asibe_cheta
      @asibe_cheta 4 місяці тому

      @@sfybskot thanks a lot I had to use chat gpt, I’m now almost done with the course. I appreciate

  • @slammerton
    @slammerton 2 роки тому

    You are awesome

  • @vincej151
    @vincej151 2 роки тому

    Hi Sean, I just bought your Udemy course. I was hoping to find some content on Vue3 multiple instances. I want to be able to have multiple Laravel ( PHP) pages each with their own Vue component. In Vue 2 it was easy to extend a single Vue instance onto multiple pages. I am lost as how to do it on Vue 3. Any content in Udemy course? Thanks!

  • @manarsayed9937
    @manarsayed9937 3 роки тому

    what is the name of the music opened when we install vue/cli? :D

  • @noushedakib1658
    @noushedakib1658 3 роки тому

    Awesome

  • @1rom11
    @1rom11 2 роки тому

    Is Vite vue and the Vue cli the same?

  • @swoorp
    @swoorp 2 роки тому

    Which music did you use when the vue cli was installing? I like it!

  • @zakidzz
    @zakidzz 3 роки тому

    please do a course on strapi

  • @ataraxia0420
    @ataraxia0420 3 роки тому

    I got an error when installing the vue cli when i type [ npm install -g @vue/cli ]. I used [ npm install -g "@vue/cli"] instead.

  • @RR-et6zp
    @RR-et6zp 2 роки тому

    "over hereee" haha

  • @gaatutube
    @gaatutube 3 роки тому

    Nice !

  • @marcusmousavi
    @marcusmousavi Рік тому

    Now I have a whole new Vue on things. Get it? Thanks :)

  • @johnramirez3247
    @johnramirez3247 Рік тому

    Do i have to always install the NPM everytime i do new projects?

    • @zenal3x49
      @zenal3x49 Рік тому

      No, once you install NPM once, you can use it anytime you want.

  • @herimornchriston6083
    @herimornchriston6083 2 місяці тому

    its seams like source code is not there

  • @ambig1
    @ambig1 2 роки тому

    Please consider providing git branch names with each video/section.

  • @mohammadalhallaq1938
    @mohammadalhallaq1938 3 роки тому

    thanks

  • @yanischetouani7392
    @yanischetouani7392 3 роки тому +1

    Hello sir , Please make a video about Firebase storage and flutter ! Pleassee !
    Thanks ♡

    • @NetNinja
      @NetNinja  3 роки тому +1

      Hey, maybe at some point, yeah :). I would like to do more Flutter videos.

  • @Zeeeeeek
    @Zeeeeeek 3 роки тому

    32:07 funny that your graph looks like a stickman :D

  • @highland5729
    @highland5729 3 роки тому

    Why you don't cover Angular?

  • @tlaidjiaahmed6870
    @tlaidjiaahmed6870 Рік тому

    the fix is eny file.vue must be named like this
    file-name.vue

  • @WorstDeveloper
    @WorstDeveloper 3 роки тому

    The future videos will use the new composition API, right?
    Not the old data API shown here.

    • @brothercaleb
      @brothercaleb 3 роки тому +1

      He’ll show it in the upcoming videos. This video is necessary for those new to vue so they can appreciate the benefits of composition api (check intro to this series).

  • @sameerchoubey9724
    @sameerchoubey9724 3 роки тому

    My changes are not auto reloading. I've to close the server and open again to see the changes in the browser.

    • @ataraxia0420
      @ataraxia0420 3 роки тому

      did you use npm run serve?

    • @sameerchoubey9724
      @sameerchoubey9724 3 роки тому

      @@ataraxia0420 Yep. Using that only

    • @00el04
      @00el04 3 роки тому +1

      just reboot VS, it happen sometimes