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

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

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

  • @masonasa7009
    @masonasa7009 2 หลายเดือนก่อน +5

    I don’t know who the hell you are @netNinja but you are litterally the best teacher on TH-cam I’ve ever met like the way you simply stuff is out of this world, you just don’t go on doing implémentation but you first break it down and get our minds prepared then you go on to show it and by then our mind has already started to grasp the idea by the earlier smaller example you made and this type of teaching deserves a honorary phd, I litterally understood Vue in just this tutorials you made thank you sir and remain blessed of this was war era I’d say “You have my sword 🗡️ “

  • @thewildhealer541
    @thewildhealer541 3 ปีที่แล้ว +125

    Definitely the best Vue 3 JS tutorials ever uploaded on TH-cam. Thank you so much dude, so many questions of mine have been answered so far.

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

      x2

    • @Mohammed-rx6ok
      @Mohammed-rx6ok 3 ปีที่แล้ว

      +3

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

      Agreed..He is a true Ninja

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

      Update: He saved me and my group during a huge project we had to do in class where my teacher didn't do his job and we had little time to learn. Still thankful for this guide and when I need to learn anything new I check if Net Ninja got a tutorial for it.
      PS we got full score on our project.

  • @jad.k.haddad
    @jad.k.haddad 2 ปีที่แล้ว +15

    dude your tutorials must be officially adopted by the devs. It's impossible to not understand your explanation. Best tutorials creator ever

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

    I have no words. You're really the best. These are the best tutorials I've ever seen. Not just about Vue. I am talking about ANY TH-cam TUTORIALS! Shaun you're the champion. Aren't you a some sort of teacher or professor? You're made for teaching!

  • @fowl7413
    @fowl7413 3 ปีที่แล้ว +10

    After browsing dozens of courses on Vue, I found yours and man, you blew my mind! Extremely easy to understand, cover all the basics for newbies plus covering the required previous knowledge too! Hat off mate, you are a champ!

  • @gradientO
    @gradientO 3 ปีที่แล้ว +24

    Man you're doing great. I need to buy your course to support you

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

      Thank you :)

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

      Hi did you buy it?

  • @joshuankrumah-buadu9341
    @joshuankrumah-buadu9341 2 ปีที่แล้ว +1

    Anytime I want to learn anything web i just head straight to your channel and I'm sorted. You doing well, Keep it up. Much love.

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

    Ok, I must say that I tried two other Vue Tutorials on YT, and this one is absolutely the best. Finally I can really understand how props and $emit work. Not only memorise the syntax, but see the logic there. You are an amazing educator! Thank you for your work! Greetings from Russia

  • @LinuxForLife
    @LinuxForLife 3 ปีที่แล้ว +13

    Another masterpiece of explanations. Congrats and Thank you!

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

    You are the best teacher ever

  • @ZakirHussain-mz2iz
    @ZakirHussain-mz2iz 3 ปีที่แล้ว +3

    Thank You Shaun! I have to say that, I learned Vue mostly from your channel by watching the previous version 2 videos.

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

    I was trying to wrap my head around React HOC for so long.
    Now days I'm learning Vue for a new role so I got to Shaun's tutorial.
    He then suddenly started talking on an unfamiliar term for me, "slots"... I mean, it just came to me, such an incredible "Ahhhhhhhhhhh" moment - I finally found a convenient way to think of HOC, Thank you man!

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

    ty ty for making this course - absolutely the easiest to understand that I've found 🙌🏽

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

    I love how I leveling up day by day

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

    I felt the panic and absolute disappointment at 26:30 when the change didn't work as expected :-) we all went through that man. Btw, great course!! I am an experienced backend developer and within few hours I learned Vue.js. Thank you so much. Matt

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

      That's awesome, thanks for watching Matt :)

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

    Shaun has made me love JavaScript and its frameworks.. after finishing this series definitely I'm gonna buy the whole course, Thank you Shaun

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

    Incredible course, I'm blown away. Paid for so many React JS courses that I really didn't like so I tried going for a different framework and yours is just the best I've seen

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

    Nice, this is incredible. Love you and love your channel from Brazilll

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

    I had a problem with slots. The anchor tag refused to style.
    I found a reference that suggest using a "deep selector" that would change the CSS in the Modal.vue style to:
    .modal .actions >>> a { [CSS Styles] }
    THAT WORKED! But WHY did that work?

    • @jeremybrews2521
      @jeremybrews2521 10 หลายเดือนก่อน

      I'll have to dig into the "deep selector". Thanks for the help

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

    The challenges part is awesome, most of the tutorials are in lack of this feature.

  • @myotoe2154
    @myotoe2154 ปีที่แล้ว

    You are the best. I really love your tutorials. Thank you so much for free of charge.

  • @lintingwei
    @lintingwei ปีที่แล้ว

    Too good this has to be in the official doc!!

  • @learnsimple4592
    @learnsimple4592 3 ปีที่แล้ว +7

    Making greatness Shaun. I have bought 2 of your udemy courses already. Please tell us when is the VueX 4 with Vue 3 tutorial coming

    • @NetNinja
      @NetNinja  3 ปีที่แล้ว +8

      Thanks so much :). I'll probably do that very ealry next year!

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

    Best web dev tutorials on the internet as always!

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

      Thanks Vincenzo :)

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

    JS + shaun = best combo

  • @Smowling
    @Smowling 9 หลายเดือนก่อน +1

    Great tutorial. Cant get enough of it.

    • @NetNinja
      @NetNinja  9 หลายเดือนก่อน

      Awesome! thanks :)

  • @push2me936
    @push2me936 ปีที่แล้ว

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

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

    clearly explained every single detail. no bullshit. good instructor.

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

    Fantastic tutorials! Really clearly explained and useful examples. Thank you for all the time and energy you've put into this. I'm looking forward to the rest of the course.

  • @thanakornmeesupprasert5179
    @thanakornmeesupprasert5179 ปีที่แล้ว

    I owe you a lot. Best teacher I've ever known. I will buy your courses and please let me know if you come to Bangkok.

  • @DanielTorres-gd2uf
    @DanielTorres-gd2uf 2 ปีที่แล้ว

    This is a great tutorial. I got to 23:04 and was thinking about this exact thing. Nailed it!

  • @alexanshuman2462
    @alexanshuman2462 ปีที่แล้ว

    🙌😍One of the best explanation, keep it up. 😀

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

      Thanks a lot 😊

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

    This was exceptional. I understood slots and events finally. Thank you.

  • @javhaasuhochir8126
    @javhaasuhochir8126 ปีที่แล้ว

    slots are amazing

  • @elakObad
    @elakObad ปีที่แล้ว

    Loving this course so far

    • @NetNinja
      @NetNinja  ปีที่แล้ว

      Awesome, thanks Oscar!

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

    very good videos to learn Vue js from scratch.. Thnx for creating such a playlist

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

    hi, very good tutorial. thanks.

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

    wow this is amazing tutorial, I want to see vue and firebase together in youtube. Thank you so much for this tutorial.

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

    bruh ur fking amazing. i've watched diff utubers but ur knowledge is next level

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

    what a explination by you sir, i am so thankful to you. ALLAH bless you.

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

    Why would anyone dislike these great tutorials? Great videos. I'm learning a lot.

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

    thanks

  • @haytammostaine5033
    @haytammostaine5033 2 หลายเดือนก่อน

    For people who are finding problems with the styling of actions, just make sure you don't have 'scoped' in the style tag of your Modal.vue

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

    Oh boii... your tutorials are the best :)

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

    This recently since i start to use vue to do smthg cool. but i get many logical trouble error in vue, and now this series is going to help me solved these~~ Thank you very much sir, it's easy to understand on your video good speech easy to get the point and organized topic. Liked it. Hope soon have many different skill, different framework introduce to the beginner.

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

    A great thanks, so well explained and good examples to apply quickly. Thank you !

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

    This is the BEST one !

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

    Hi Shaun. Great tutorial. One quick question: Considering that toggleModal() is a method, couldn't we pass as a parameter inside the brackets which of the two modals we want to toggle instead of having two different methods one for each modal? For instance:
    open modal one
    open modal two

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

      I don't think this works, because this will pass the value of showModalOne and showModalTwo, as opposed to a reference to them.
      I solved it by doing the following, but I'm thinking there must be a better way to do this...
      toggleModal(modal) {
      this.$data[modal] = !this.$data[modal];
      }
      and then calling it like
      Show Modal 1
      Show Modal 2

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

    dude, i love you

  • @JJ-ot3ps
    @JJ-ot3ps 2 ปีที่แล้ว

    I watched a few vue tutorials, this is def the best one! can you also upload more videos how vue can work with backend framework like django or larval? or even tailwind lol

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

    Fantastic series! Massive thanks!

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

    amazing tutorial dude thanks a ton

  • @Toni-nw1dk
    @Toni-nw1dk 3 ปีที่แล้ว

    Thank you so much! I love your videos!

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

    ty.

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

    Esta serie de videos es espléndida.

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

    Loving the Tutorials and so far the best explained tutorial I have found on vue.
    On question though regarding slots. Why not use a component that has the template but a slot. like we can also have a Links component instead of a links Slot? Just trying to understand the difference between the two.

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

    Idea for next videos: React course like this!

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

    first view and thank u bruh for such amazing tuts!!

  • @AA-jb5cs
    @AA-jb5cs 3 ปีที่แล้ว

    Hi, I have a question please, couldn't we use @click="toggleModal" directly in the Modal tag instead of creating a custom event.
    I know you might not have time to answer my question, but I thought it won't hurt me if I try
    Edit: I've tested what I've asked and it works fine, I guess you used emit to show us it's use. Thanks a lot for these great videos btw, I'm really learning a lot, best tutor ever!

  • @NotesandPens-ro9wx
    @NotesandPens-ro9wx ปีที่แล้ว +1

    What is the necessity to use props? I meant why we or when we should use it? 11:40

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

    thanks so much for a great video!

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

    you are still great

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

    when using slots the css on Modal.vue won't apply to the tags h1, p and a... does anyone have the same bug?

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

      yep same here, CSS do not apply! I'm going crazy trying to figure out why

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

      It did. Check on the css at the bottom of Modal.vue example it says .modal.sale .actions a { color: white; } change that to blue or any color and see what happens

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

    who tf could have disliked that

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

      I was wondering the same thing

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

    For anyone else running into it the server doesn't seem to always refresh properly after changes so hitting Ctrl-F5 to do a hard refresh seems to help.

  • @gurbanovsh
    @gurbanovsh ปีที่แล้ว

    Good Job!

  • @Sora-H
    @Sora-H 2 หลายเดือนก่อน

    Thanks!

    • @NetNinja
      @NetNinja  2 หลายเดือนก่อน

      Thanks so much for your support Sora :) it means a lot!

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

    I always have a good time with your tuts. however with this one Vue was so buggy. I would delete text etc from the app and it would still appear in the browser even tho id deleted it from the app 100%. No idea why it was so crazy with me. I followed instructions to optimise and ran the " npm build to optimise" and that worked - although I don't think im quite ready to understand the list folder yet, but I have seen you cover it on one of the firebase tutorials, so I hope everything comes together by the end 🤓

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

    Thank you very mutch!

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

    awesome sir..

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

    People say Vue is easy to learn but for me it is far more complicating than React. Feel like learning new language than applying js. What do U think?

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

    Thank you very much!

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

    lovely

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

    Thank you very much for these great explanations. I got one question...
    Is the preferred way: using that "emit-function" or can I just use a function from "props"?

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

    my styles are not working after using the modals

  • @boxtrainer
    @boxtrainer ปีที่แล้ว

    QUESTION: sometimes you use 'text' sometimes "text" I recognize in the I can use both as long as I am using one style in the current tag .
    where is it important to use specific " or '
    could someone give a useful hint?

  • @chpasta
    @chpasta ปีที่แล้ว

    Hi there! Why both modals couldn't remain with the inital styles (for exemple: background: crImson). Thanks

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

    about the assignment I've made it a bit different, and it works, but i wonder if there's a reason not to do it my way.
    i changed showModal to be an array of booleans, and toggleShowModal method to receive an index as an argument, like this:
    toggleShowModal(i){
    this.showModal[i] = !this.showModal[i]
    }
    is there any reason not to do it this way?

  • @EdelwaysMusic
    @EdelwaysMusic ปีที่แล้ว

    Can someone explain: in previous video (Basics part 2) when we send book item to the app.js during v-for we did not used props. We just put book without porps declaration. How does it works?

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

    thank you so much

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

    Thank you Shaun, you did a great job. I do learn a lot from you tutorial and love it. I therefore joined your TH-cam member and going to buy your Udemy course. Would you consider to generate a course combining with Laravel and Vue(or React) (use Vue/React in Laravel project)?

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

    I'm getting a bunch of red underlines in App.vue even though the program runs perfectly fine without errors. It says it's related to eslint-plugin-vue

    • @00el04
      @00el04 3 ปีที่แล้ว

      make sure not to download it when you create the app

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

    the unfortunate thing about this visual code studio theme is it is hard to know on which he tab is he in, you end up writing or modifying the code in different tab than intended

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

    in teleport section, once i click the backdrop to close it , it just darkens and not closing dunno why , normally it works but once i add teleport tag it doesnt anymore lol why tho

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

      This happened to me as well, and I'm not sure why. Did you manage to fix it? It'd be good to know what went wrong.

  • @samhitavetcha322
    @samhitavetcha322 7 หลายเดือนก่อน

    Can we send the toggleModal function as props and use it instead of custom events?

  • @huzaifaadil2128
    @huzaifaadil2128 ปีที่แล้ว

    Sir, why are you using v-if here to close the modal even the v-show renders fast?

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

    Thanks sir ! but why would we want to place a modal or a popup at the bottom of the DOM tree, what is the purpose ?

  • @qamaria7454
    @qamaria7454 ปีที่แล้ว

    Resolve the refresh issue by closing the server and run again npm run server. I think the probleme come from Websocket

  • @jimos9878
    @jimos9878 10 หลายเดือนก่อน

    What if you want to pass on many data, therefore props, to a child component? We could add a property inside data () {} object which would be an object of many properties for the props we want to pass on? and we bind that object to the child component inside our parent one? so for example if we would have some user data we could do it like: data () { userData: { userId: "user1", password: "12345678" } and bind the userData property in the tag of our child component, like: ?? Or isn't this possible for some reason?
    I tried to do this and I think it didn't work, but I could not understand very good how the props, and all these in Vue, work, so I might had done it incorrectly in general at that point.

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

    There's a bug where the modal automatically shows without clicking the button when you use v-show inside the teleport tag instead of v-if. How do we combat this?

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

    Your Course is awesome. What else is there apart from this in your Course on Udemy. Can you share links for your course? I need to purchase. Thanks. Again U r great

  • @user-tu4ij7pv2w
    @user-tu4ij7pv2w 8 หลายเดือนก่อน

    This is good stuff! I was watching @ vuemastery but got stuck because they skipped some stuff. This is so well explained! I just wonder if working with vue cli is the best way to go.. And hopefullly i don't get stuck later. But till now it's the best! Can you please update the course files link? Can't find the files.. [edit] I just found them at lesson 19.. maybe good to add this ?

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

    I'm not getting the exact output as your @ 15:16
    this got me the result but can't understand why....

  • @mr.k8660
    @mr.k8660 20 วันที่ผ่านมา

    What icon extension do you use ?

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

    couldnt get the css going on the slots part

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

    Please teach us angular also

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

    Do you read all the official documentation before making these tutorials?

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

      yeah i think he does, I'm going through the docs and its very similar :)

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

      I looked yesterday. Its so familiar with docs.

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

    I know, I know you have no desire to answer this question but still, I want to ask you. Would you suggest/prefer to React or Vue?

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

      Honestly depends on what I'm making, but I'm really enjoying Vue 3 using the compostion api at the minute. I preferred React to Vue 2 for most things though.

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

    how to open the webpage of the vue app from vs vode?

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

    I'm not sure why when I click on the button show modal two it doesn't work but its actually changing the other button function ...so when I click first the show modal button the first modal will show but if I click the show modal two then the show modal button modal two shows

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

      oh okay so ... I defined it as Show by mistake T__T .........Thanks for the tutorials I really love this channel