The Ultimate Vue 3 Tutorial (100% Composition API)

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 258

  • @Flabidouf
    @Flabidouf 11 месяцев назад +34

    This. You found the best course for learning Vue 3. You don't need to search anymore friend. This is the bomb.

    • @GGSoft2009
      @GGSoft2009 5 месяцев назад +1

      Agree 100%

    • @kabirkumar5815
      @kabirkumar5815 3 месяца назад +1

      this kinda sucks - waaaay too much filler

    • @verteks16
      @verteks16 2 месяца назад

      He only scratches the surface with this butched version of his full course. RUclips version of this tutorial is definitely not ultimate but basic.

  • @johanforsling7736
    @johanforsling7736 2 года назад +89

    I've been in tutorial hell for about two years now so I know what I'm talking about; you sir explain everything in a way I wish all tutors would!! Keep on the good work!

    • @veryhyped
      @veryhyped Год назад +3

      wow. same. i first learnt react and hated it, then learnt vue but couldnt find any jobs so i was learning react again. but with vue things are much more easier. i wish there were more vue jobs

    • @onça_pintuda999
      @onça_pintuda999 Год назад

      @@veryhyped Lol, I'm struggling to learn vue, and I'm very advanced in React. Some things are not well explained, I came here to get the most recent tutorial, cause all other tutorias people use different ways to do something, and by the end, the shit dont work ahshsahshahsah Hope the tutorial is good as u guys say

    • @veryhyped
      @veryhyped Год назад

      @@onça_pintuda999 how are you even advanced in react, please tell me good resources. react is very very very complicated

    • @onça_pintuda999
      @onça_pintuda999 Год назад

      @@veryhyped I studied in a course where the front end framework was react, we had some instructions and we had a ton of projects to do, by the of 4 months we got in a very interesting place. But I learned react with TS by my self, the that apart was the most difficult by the start, we u got the logic of component props typing it become easier.
      And in what part are u struggling?
      Like, the componentization (for me) is more flexible in react, when u create separed files for each component and call it in a page file, its veey clean. My favorite UI lib is very intuitive in react, its Chakra Ui. If u struggle with styling and styled-components, watch some chakra tutorial with JS and TS after (if u want). Maybe u need to get a step forward to get a step back and get the fundamentals

    • @Tobsson
      @Tobsson Год назад

      @@veryhyped React and Vue are very similar. It's just different syntax and what happens in the background. React.useEffect is essentially watch, React.useState is Vues ref. Then there are different syntax to update everything and optimise, but if you know either of them the other is pretty easy. It's all pretty much just JavaScript in the end. So, learn JavaScript really good before moving on to any library/framework.
      Good resources is the docs for React. They've updated them recently and is very good now. Learning the basics in React to land a job shouldn't take more than a month or two.

  • @rodrigo-vl7bi
    @rodrigo-vl7bi Год назад +3

    that vue-router explanation is the most beautiful explanation i've seen in a youtube tutorial

  • @astratow
    @astratow 8 месяцев назад +1

    2:56:43 - boilerplate basic
    2:57:26 - basic styling
    2:58:38 - styling continued
    3:01:21 - card styling
    3:02:28 - card styling continue

  • @mikeleggett
    @mikeleggett Год назад +3

    I had almost given up with Vue - this is the best tutorial. Detailed explanation of everthing. Great job thank you so much.

  • @d3.finance
    @d3.finance 10 месяцев назад +1

    Cannot express how helpful this was for me. I was in this awkward phase of my learning curve where I understood the basics but was having trouble with the advanced concepts. This was a perfect middle ground for me building the gaps I had. Thank you so much for this video. I'll be here more often for sure.

  • @mises1615
    @mises1615 2 года назад +6

    1:23:11 Count is updating but template/view is not updated. Vue is not re-rendering a full template of components every time you click a button! In your template "Ref" object is assigned to counter variable. Ref have assigned listener, it is triggered whenever value is changed. Vue is assigning to that listener what need to be re-rendered when value is changed in your example just tag is re-rendered.

    • @joshdronfield
      @joshdronfield 8 дней назад

      I was thinking this when he was explaining. what is the point in re rendering the whole thing when you could just tell it exactly what HTML element to re render

  • @fencesitter1
    @fencesitter1 Год назад +7

    This is one of the few VUE tutorials with combined API teaching . This is great!

  • @richardvos3845
    @richardvos3845 Год назад +15

    I do not often leave a comment but I feel like I really have to, watching this video. I really appreciate the time and effort you took to make this Tutorial and I will surely be watching more of your channel. The way the tutorial is set up, is very good to follow, especially for beginning Vue developers out there. It's also clear that you are having a lot of fun making this, which makes it even more pleasant to follow. Thank you very much for make this high quality content, helping me improve my skills.

    • @rahatulislam633
      @rahatulislam633 5 месяцев назад

      Hey, I'm really feeling confident about starting my journey with Vue. Recently, I started reading the documentation and did a small project with Nuxt and Pinia. While working on my project, I realized that I have a lot of gaps in my knowledge, and I need to learn Vue more thoroughly. So, I was searching for a video or course to help with this, and I found this one: RUclips Video.
      Please let me know if this video is perfect for me as a junior developer who is enthusiastic about working with Vue and wants to gain in-depth knowledge. If you have any suggestions, please share them. Your advice and guidance help a lot.

    • @richardvos3845
      @richardvos3845 5 месяцев назад

      @@rahatulislam633 I found this video and other materiaal of this channel very helpfull as a junior developer starting with Vue. I am sure it will help you out as well.

    • @rahatulislam633
      @rahatulislam633 5 месяцев назад

      @@richardvos3845 Thank you.

  • @andrewc3942
    @andrewc3942 Год назад +1

    I am very glad that I found such a golden work.
    The author succinctly and step-by-step goes through the important basics of Vue, explaining each aspect as clearly as possible.
    Thank you very much. Comment from Russia with love.

    • @andrewc3942
      @andrewc3942 Год назад

      @@ЕленаФедорова-э7ю по ссылке в описании к видео

  • @jakobo5521
    @jakobo5521 Год назад +3

    I am just starting my adventure with a Vue as a junior and I have to admint that you this tutorial helped me a lot if it comes to the overall understanding of the Vue concept. I find it much easier and more approachable comparing to the structure of React, especially for me as the beginner. Your way of explanation 'as for child' is also great. It helps to really understand what is going on under the cover. Looking forward to watch more of your stuff. Thanks once more time and keep the great job! Greetings from Poland! 🤝💪
    P.S. if anyone has some good advices for Vue beginner I would be greateful to hear that! :)

    • @rahatulislam633
      @rahatulislam633 5 месяцев назад

      Hey, I'm really feeling confident about starting my journey with Vue. Recently, I started reading the documentation and did a small project with Nuxt and Pinia. While working on my project, I realized that I have a lot of gaps in my knowledge, and I need to learn Vue more thoroughly. So, I was searching for a video or course to help with this, and I found this one: RUclips Video.
      Please let me know if this video is perfect for me as a junior developer who is enthusiastic about working with Vue and wants to gain in-depth knowledge. If you have any suggestions, please share them. Your advice and guidance help a lot.

  • @minty1110
    @minty1110 2 месяца назад

    This guy is an exceptionally gifted tutor. I wish he made more videos

  • @UeharaKeitaro上原恵太郎
    @UeharaKeitaro上原恵太郎 Год назад +1

    I bought your course at Udemy because of your YT videos. Thank you

  • @johnmaguire2185
    @johnmaguire2185 Год назад

    Good course for a clear and detailed intro to vue. For the maths question 1. The answer is 1. The order is
    (2 + 2) = 4 brackets then x 2 = 8 as the 2(2 + 2) = 8 is all one bracket operation. Finally 8 divided by 8 = 1

    • @ArtificialDjDAGX
      @ArtificialDjDAGX 2 месяца назад

      the division symbol used in the math quiz is special in that it dictates that the number on the left is the dividend and the number on the right is the divisor. So, the actual expression is 8/2 * (2+2)

  • @cumatoga9511
    @cumatoga9511 2 месяца назад

    Thank you for your time and effort🌹

  • @barretoingridy
    @barretoingridy Год назад +2

    This was the best online course I've ever taken in my whole life... thank you so much sir!

  • @QtheCoder
    @QtheCoder 2 года назад +8

    Wasn't expecting a 6 hrs vue course but bro thanks!!! Day 1 watch 👌

  • @redblues9566
    @redblues9566 Год назад +1

    This lecture is really great. I received great help. thank you. From South Korea

  • @89Valkyrie
    @89Valkyrie Год назад +19

    The explanation is pure gold. For anyone who is a beginner, you won't find another video that explains so much. It's not just the quantity, it's the flow. The flow makes it easy so that, if for example, in the first project you don't get what a dependency is, at least you can pause and go read about it elsewhere, then come back and tied to the short and sweet explanation.

  • @erudicnt
    @erudicnt 10 месяцев назад

    Best tutorial on Vue3 i 've ever seen in RUclips !! Great job ! Many Thanks !

  • @vimmasi1
    @vimmasi1 Год назад

    Man, I knew I recognized your voice. I bought your course at Udemy 2 months ago, and it was the best Vue3 Composition API I have ever seen!

  • @Mintirafro
    @Mintirafro Год назад +1

    Just bought yourt course on udemy as a thanking gesture for your dedicated pinia video
    Helped me a lot 🤝

  • @theafricanpostpost
    @theafricanpostpost Год назад +1

    This is absolutely what I call a tutorial, Laith Academy has command of the subject and the teaching skills compared to a lot of others putting videos when not knowing the subject properly. Thank you very much Laith Academy

  • @KRinnCoding
    @KRinnCoding 6 месяцев назад

    I have felt appreciated so many thanks to you x100 . You're the best teacher to teach me of Vue without spending money 💰😊 from only this video not only Vue, but JavaScript, array ,some of points that I'm not clear in previous but now so magic I'm understanding so many from JavaScript, array, event.... please stay good health teacher 🙏☺️💙 I really love your 6hour of your video.☺️💙

  • @LeonelEBD
    @LeonelEBD Год назад +6

    Amazing stuff, indeed a great find. Programmed a couple of sites back in 2021 in Vue and fell in love for it. Sadly haven't used it for a while with the coming of Vue3, finally got the time to sit down and get some of the Vue knowledge I've lost since with this tutorial. Also HUGE thanks for using the composition API which is new to me. I remember the problem of keeping the order and scrolling up & down in the Options API in my last project and this surely fixes that problem.
    Thank you !

    • @rahatulislam633
      @rahatulislam633 5 месяцев назад +1

      Hey, I'm really feeling confident about starting my journey with Vue. Recently, I started reading the documentation and did a small project with Nuxt and Pinia. While working on my project, I realized that I have a lot of gaps in my knowledge, and I need to learn Vue more thoroughly. So, I was searching for a video or course to help with this, and I found this one: RUclips Video.
      Please let me know if this video is perfect for me as a junior developer who is enthusiastic about working with Vue and wants to gain in-depth knowledge. If you have any suggestions, please share them. Your advice and guidance help a lot.

  • @ShyamkumarMuralidharan
    @ShyamkumarMuralidharan 11 месяцев назад

    one of the best beginner friendly videos for vue 3

  • @changethementality
    @changethementality 6 месяцев назад

    You're a life saver! All the other courses I could find just had me annoyed and stressed out.

  • @alinalel8018
    @alinalel8018 7 месяцев назад

    Thank you for such an terrific lesson! It is very laconically, detailed and useful. Special respect for your pronunciation! It was awesome✨

  • @MagnusMcManaman
    @MagnusMcManaman Год назад +63

    From the Vue documentation page: *keys are no longer necessary* on v-if/v-else/v-else-if branches, since Vue now automatically generates unique keys.

    • @rodrigo-vl7bi
      @rodrigo-vl7bi Год назад +2

      thanks

    • @rodrigo-vl7bi
      @rodrigo-vl7bi Год назад +3

      that makes more sense tbh

    • @onça_pintuda999
      @onça_pintuda999 Год назад +2

      Nice, thanks, I was going to face that problem in a few minutes, now i'm not ahshsahash

    • @malla_pavan
      @malla_pavan Год назад

      sir can you tell me in this tutorial he used ?

    • @josephedidiong7781
      @josephedidiong7781 Год назад +2

      ​@@malla_pavan He used because he used composition API that doesn't require data and method

  • @92abhinavkashyap
    @92abhinavkashyap 4 месяца назад +1

    What an amazing tutorial :) Thanks for this. I thoroughly enjoyed it. Thank you so much. I hope you release more videos like this :)

  • @mahendranath2504
    @mahendranath2504 2 года назад +5

    Thank you so much Laith, I am so happy about this,
    I have taken your GraphQL Course and I loved it,
    I have been following your channel for a long time, I'm a big fan of your channel, a happy subscriber

  • @buxmon
    @buxmon Месяц назад

    Great content man, I was stuck with the options API, before I watched this :D Thanks for the explanation, now I'm never going back. this tutorial rox (Y)
    Watching @1.5x speed
    Perfect video to learn vue3

  • @Godsmindcraft
    @Godsmindcraft Год назад

    This coursen should be the best vue course presently with direct hands on project and consistent explanations. Thanks so much Laith

  • @donnyjoe7653
    @donnyjoe7653 8 месяцев назад

    Amazing tutorial! You over-delivered with all the nice little VSCode tricks. Thank you!

  • @Wuddigot
    @Wuddigot Год назад +16

    A tip for maintaining paths is to use @ instead of . or ..
    @ by default starts at src/, so fi you end up moving things around or scaling up, you're less likely to need to go to each view/component and update paths

    • @StarOnCheek
      @StarOnCheek Год назад +2

      I believe this is configured in your bundler and Vue has nothing to do with that

  • @_nom_
    @_nom_ Год назад

    Coming from Vue 2. I found 3 jarring, like I know nothing. So thank you.

  • @erosburastero8205
    @erosburastero8205 2 года назад +5

    Thank you for your video content, i've watched the nuxt crash course and after practicing a lot i could get my first job, and now i was looking for a course like this in order to be able to learn nuxt3, i really acknowledge your work

  • @atulchandradash8477
    @atulchandradash8477 2 года назад +1

    One of the best tutorial about VueJs in RUclips. Very detailed and best video. Thanks you so much sir.

  • @darumaleo
    @darumaleo Год назад

    this is an incredible video, i've been using the options api for a while and thanks to you i learned faster some of the compositions concepts with ease and not much time, thx

  • @nawrozalialamdost5277
    @nawrozalialamdost5277 Год назад

    I didn't saw such a instructor like you, you are amazing and your lectures are awesome. need more such lectures from you espacificliy it will be good to continue the advanced series of Vue.js in the channel. Love and support from Afghanistan

  • @gtanmoy
    @gtanmoy 2 года назад +8

    Salute to you Sir for your efforts to make this excellent course! I request you to extend this course with PWA and Capacitor with VUE.

  • @nife2453
    @nife2453 Год назад +2

    thank you so much for your effort. You are such a great teacher explaining everything very understandable

  • @twesigyeronaldk
    @twesigyeronaldk 5 месяцев назад

    This is the best tutorial on vue 3. Very clear and very simple to understand. Very many complex topics are dealt with so clearly and made to look so simple. Thanks a bunch. 💯

  • @PatrizioMilione
    @PatrizioMilione Год назад +1

    BEST EXPLANATIONS EVER, THANKS! 🚀

  • @Neo-uw8hx
    @Neo-uw8hx 5 месяцев назад +1

    just finished it , totaly best the course for biggeners after learning the basics of VUE 3 and start bullding project. learned enough to make me start bullding some on my own. thanks laith (اخوكم من العراق)

  • @kingvas7638
    @kingvas7638 2 года назад

    Vue 3 is the best Front end framework , thanks for the effort !!

  • @MrTomro
    @MrTomro Год назад

    You are made to teach. Built different. Love ya.

  • @Kimbley2ii
    @Kimbley2ii 2 года назад +1

    Thanks for sharing this. I bought the course on udemy after completing this video! good stuff.

  • @HaibeiSongCarol
    @HaibeiSongCarol Год назад

    Finished all 3 projects! Thank you!!

  • @avelo895
    @avelo895 8 месяцев назад

    Thank you. This is absolutely brilliant and comprehensible!

  • @AdegbengaAgoroCrenet
    @AdegbengaAgoroCrenet 2 года назад

    Didn't expect the length. Truly great stuff Laith

  • @eddawry
    @eddawry 11 месяцев назад

    What a course clear and simple and easy to understand Thants
    Laith

  • @OmerAirJordan
    @OmerAirJordan 4 месяца назад

    Splendid course, thank you for that !

  • @johnongwae
    @johnongwae Год назад

    This is awesome tutorial, I managed to grasp most concepts for my new job. Thanks a lot

  • @BillaSaheb786
    @BillaSaheb786 2 года назад

    You rock Sir. Put all video and tutorial of VUE JS and Nuxt Js... Your channel will rock rather than putting on UDEMY. You will earn more from RUclips rather than UDEMY. Your way of teaching is exceptional.

  • @jonl316
    @jonl316 Год назад +3

    One of my favorite tutorials for Vue. Thank you so much!!

  • @TysonHritik
    @TysonHritik 2 года назад +5

    So great I easily get every concept Love the way you teaching also no one Is making video on composition API but you did keep it up ,When we are getting part 2 this ??

    • @laithacademy
      @laithacademy  2 года назад +4

      Rest is on Udemy

    • @TysonHritik
      @TysonHritik 2 года назад +2

      @@laithacademy Okay thanks i'll buy from there but there is showing 389rs deal just for 1 day left is sale is going to extend or not because i don't have money right now

    • @rishavjain1867
      @rishavjain1867 Год назад +1

      @@TysonHritik dw udemy is always showing that. Buy teh course whenever u can

  • @caaltz
    @caaltz 11 месяцев назад +1

    This is the course you've been looking for traveler, take a sit and enjoy the vue

  • @TheFreelanceManiac
    @TheFreelanceManiac 5 месяцев назад

    Almost done here! Was an amazing course! Thanks a lot for the on point delivery and clarity!

  • @abc33155
    @abc33155 Год назад

    40:40 It’s not true that attaching events is more difficult in plain JavaScript, you can just add an onclick attribute to the button tag. But the “experts” say that’s not recommended. But the same thing is exactly how it’s done in Vue.js

  • @chefnabil171
    @chefnabil171 2 года назад

    I just started, I like it.
    Thank you very much.

  • @borishrimov8332
    @borishrimov8332 Год назад +1

    I like Options API more because everything has it's place and code doesn't get messy. Data is in data(), fuctions are in methods and so on...

  • @DavidKHill
    @DavidKHill 10 месяцев назад

    Signed up for the course. Thanks.

  • @RohitNaik
    @RohitNaik 9 месяцев назад

    1:29:00 its Reference Implementation . usually used in Java world as well

  • @NeThsDomain
    @NeThsDomain Год назад +2

    thanks for tutorial. 1.25x speed sounds more natural for your delivery

  • @ophelia6207
    @ophelia6207 Год назад

    Thank you SO much for this AMAZING tutorial!!

  • @brayanjairduquepinto3439
    @brayanjairduquepinto3439 6 месяцев назад

    I really appreciate this video ! Thanks you so much.

  • @actualBIAS
    @actualBIAS Год назад

    32:18 This is something you would say if and only if you can put yourself into the position of a learner. Thank you.

    • @actualBIAS
      @actualBIAS Год назад

      1:14:00 You're a great teacher bro

  • @lhceleguim
    @lhceleguim Год назад

    Simply phenomenal. Thank you very much.

  • @deepakshukla2526
    @deepakshukla2526 Год назад

    I also prefer composition. Easy to remember, better learning curve, nothing much to memorize and easy for beginners as well. I feel everyone should start strictly using composition api.

  • @cumatoga9511
    @cumatoga9511 2 месяца назад

    Hi thanks for cours, i have a question, in 06:10:20 you write "const { numberOfCorrectAnswers, quizQuestionLength} = defineProps (["quizQuestionLength","numberOfCorrectAnswers"])
    in this code varible and value is reverse, i mean first varible is "numberOfCorrectAnswers" but first value is "quizQuestionLength" but when we run the code varible is correct, how works defineProps func , we have to give same name varible and value?

    • @verteks16
      @verteks16 2 месяца назад

      defineProps returns an Object / Proxy object, which in this situation looks like this: {numberOfCorrectAnswers: , quizQuestionLength: }. Then, left side of this assignment is a destructuring assignment, it means JS will assign returned object keys to constants with the same names, so order of variables are not important here.

    • @cumatoga9511
      @cumatoga9511 2 месяца назад +1

      @@verteks16 i understand thank you 🙏

  • @iwonder9606
    @iwonder9606 Год назад

    You did a fantastic job !
    Thank you ❤

  • @CoderSineNomine
    @CoderSineNomine Год назад

    hi there.. great tutorial, thank you very much. what is the syntax highlighter you are using?

  • @SaidazimSI
    @SaidazimSI 2 месяца назад

    Thank you!
    This course needs to be updated...

  • @Kouatchoudjakouronald
    @Kouatchoudjakouronald 9 месяцев назад

    Thank you very much, this has been very useful.

  • @Loki-je3oj
    @Loki-je3oj Год назад

    This was awesome!

  • @Eidsheimen
    @Eidsheimen Год назад

    Enjoyed the tutorial, but i would love it if you added chapters to the video! Would make it easier to navigate to the sections that I "care" about!

  • @ihorrud5088
    @ihorrud5088 Год назад

    Thank you for this course!

  • @mathieumichaellubczynski5613
    @mathieumichaellubczynski5613 Год назад

    @5:18:09 I'm having wierd vite internal server error while importing QuizHeader for unkown reasons. I double checked everything you did and still cannot understand why it is having this issues.
    [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax
    It only happens on import QuizHeader from "../components/QuizHeader.vue"

  • @MrVernuk
    @MrVernuk 11 месяцев назад

    It was awesome! Thank you!

  • @JohnsonNong
    @JohnsonNong Год назад

    OMG i love your video, thank you

  • @kapytanhook
    @kapytanhook Год назад

    Very good, was hoping to see some advanced topics like reactive, slots, state management, when I can use async in the composition api etc.
    When you mentioned the Instagram example it had some of that. But I suppose that is only on Udemy. I must not have picked up on that.
    Good quality stuff, will consider paying for your course

  • @ren97x
    @ren97x Год назад

    BRO GOOD EXPLANATION REALLY UNDERSTAND IT

  • @auto-diciplime237
    @auto-diciplime237 Год назад

    Thank you very much great content as usual

  • @misaellima
    @misaellima Год назад

    Thanks for the excellent learning material!

  • @alexchang8180
    @alexchang8180 Год назад +1

    do you cover deployment in ur course?

  • @kihongkim8726
    @kihongkim8726 11 месяцев назад

    43:43
    1:53:31
    2:00:47
    3:34:31
    4:32:30
    5:03:10
    finish!!

  • @doubleyousl3726
    @doubleyousl3726 Год назад

    Project 2 02:26:35
    Project 3 03:03:15

  • @3minutesbibletruth
    @3minutesbibletruth 2 года назад

    Thanks for your good work ones again boss

  • @SherealynRemigio
    @SherealynRemigio Год назад

    Thank you so much!!! This helps me a lot!

  • @kabirkumar5815
    @kabirkumar5815 3 месяца назад

    First project course actually starts at 9:02

  • @Watson2Chanell
    @Watson2Chanell 2 года назад +3

    The actual composition API starts in 01:14:45

  • @EmmanuelTembo-gv1ll
    @EmmanuelTembo-gv1ll Год назад

    this tutorial is amazing

  • @michaelomale1975
    @michaelomale1975 Год назад

    hello laith... i want to purchase the full course on udemy but it seems like the discount have expired, plz how do i go about it sir.

  • @eltroito
    @eltroito 2 года назад +1

    i ran into a JSON file that carries a double [[ ]] containing all the data do you know a way to access it in vue.js

  • @alternbits
    @alternbits Год назад

    Thank you. a great vue 3 tutorial

  • @somayehheidari8880
    @somayehheidari8880 Год назад

    Hi, thank you so much for the amazing video.
    I stuck in the third project, where is the json file?

  • @ali90taz
    @ali90taz Год назад

    Which snippet plugin do you use?

  • @mufashadesu7261
    @mufashadesu7261 11 месяцев назад

    How do I use the composition api reactive method like computed but can accept arguments or like the methods in the vue options api?

  • @unemployedcse3514
    @unemployedcse3514 3 месяца назад

    awesome ❤