The Ultimate Vue 3 Tutorial (100% Composition API)

Рет қаралды 269,013

Laith Academy

Күн бұрын

Пікірлер: 258

@Flabidouf 11 ай бұрын

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

@GGSoft2009 5 ай бұрын

Agree 100%

@kabirkumar5815 3 ай бұрын

this kinda sucks - waaaay too much filler

@verteks16 2 ай бұрын

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

@johanforsling7736 2 жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

@@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 Жыл бұрын

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

@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 Жыл бұрын

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

@astratow 8 ай бұрын

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 Жыл бұрын

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

@MagnusMcManaman Жыл бұрын

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 Жыл бұрын

thanks

@rodrigo-vl7bi Жыл бұрын

that makes more sense tbh

@onça_pintuda999 Жыл бұрын

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

@malla_pavan Жыл бұрын

sir can you tell me in this tutorial he used ?

@josephedidiong7781 Жыл бұрын

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

@d3.finance 10 ай бұрын

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 2 жыл бұрын

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 6 күн бұрын

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

@cumatoga9511 2 ай бұрын

Thank you for your time and effort🌹

@rodrigo-vl7bi Жыл бұрын

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

@fencesitter1 Жыл бұрын

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

@redblues9566 Жыл бұрын

I agree.

@andrewc3942 Жыл бұрын

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 Жыл бұрын

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

@richardvos3845 Жыл бұрын

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 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: KZbin 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 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 5 ай бұрын

@@richardvos3845 Thank you.

@jakobo5521 Жыл бұрын

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 5 ай бұрын

@barretoingridy Жыл бұрын

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

@QtheCoder 2 жыл бұрын

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

@UeharaKeitaro上原恵太郎 Жыл бұрын

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

@erudicnt 10 ай бұрын

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

@theafricanpostpost Жыл бұрын

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

@89Valkyrie Жыл бұрын

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.

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

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

@LeonelEBD Жыл бұрын

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 5 ай бұрын

@Wuddigot Жыл бұрын

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 Жыл бұрын

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

@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.☺️💙

@minty1110 2 ай бұрын

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

@Mintirafro Жыл бұрын

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

@mahendranath2504 2 жыл бұрын

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

@ShyamkumarMuralidharan 11 ай бұрын

one of the best beginner friendly videos for vue 3

@redblues9566 Жыл бұрын

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

@atulchandradash8477 2 жыл бұрын

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

@alinalel8018 7 ай бұрын

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

@92abhinavkashyap 4 ай бұрын

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

@changethementality 6 ай бұрын

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

@donnyjoe7653 8 ай бұрын

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

@Godsmindcraft Жыл бұрын

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

@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

@PatrizioMilione Жыл бұрын

BEST EXPLANATIONS EVER, THANKS! 🚀

@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

@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

@erosburastero8205 2 жыл бұрын

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

@gtanmoy 2 жыл бұрын

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.

@_nom_ Жыл бұрын

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

@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

@RohitNaik 9 ай бұрын

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

@TysonHritik Жыл бұрын

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 Жыл бұрын

Rest is on Udemy

@TysonHritik Жыл бұрын

@@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 Жыл бұрын

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

@kingvas7638 2 жыл бұрын

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

@Kimbley2ii 2 жыл бұрын

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

@HaibeiSongCarol Жыл бұрын

Finished all 3 projects! Thank you!!

@nife2453 Жыл бұрын

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

@MrTomro Жыл бұрын

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

@eddawry 11 ай бұрын

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

@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 KZbin rather than UDEMY. Your way of teaching is exceptional.

@avelo895 8 ай бұрын

Thank you. This is absolutely brilliant and comprehensible!

@AdegbengaAgoroCrenet 2 жыл бұрын

Didn't expect the length. Truly great stuff Laith

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

@OmerAirJordan 4 ай бұрын

Splendid course, thank you for that !

@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 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 2 ай бұрын

@@verteks16 i understand thank you 🙏

@johnongwae Жыл бұрын

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

@jonl316 Жыл бұрын

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

@NeThsDomain Жыл бұрын

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

@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 Жыл бұрын

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

@borishrimov8332 Жыл бұрын

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

@danilisaev1629 9 ай бұрын

Can anyone please explain to me why does he even needs this two way binding feature when filling the text area? Isnt it much simplier to just allow user to type in whatever he wants and then save this input after some buttons are pressed (like Add Note) or do not save (when it is Close button). What is the point of two way binding in this exact case? Why does he needs to get state of text area in this case?

@chefnabil171 2 жыл бұрын

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

@IIllIIIIIllllII 4 ай бұрын

npm innit vue@latest always gives me TypeError: (0 , import_node_util.parseArgs) is not a function error and it doesnt ask me any questions

@CoderSineNomine Жыл бұрын

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

@DavidKHill 10 ай бұрын

Signed up for the course. Thanks.

@ophelia6207 Жыл бұрын

Thank you SO much for this AMAZING tutorial!!

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

@ThanhPham-ep8qq Жыл бұрын

where can i download the json file for 3rd project ?

@caaltz 11 ай бұрын

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

@Neo-uw8hx 5 ай бұрын

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 (اخوكم من العراق)

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

@eltroito 2 жыл бұрын

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

@kabirkumar5815 3 ай бұрын

First project course actually starts at 9:02

@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

@yudi6451 Жыл бұрын

in project 2, when the modal open iwant the textarea to be focused, i try to add autofocus in the html, it doesnt do anything, any suggestion how to do it?

@alexchang8180 Жыл бұрын

do you cover deployment in ur course?

@brayanjairduquepinto3439 5 ай бұрын

I really appreciate this video ! Thanks you so much.

@lhceleguim Жыл бұрын

Simply phenomenal. Thank you very much.

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

@fuadajkic9167 11 ай бұрын

Good tutorial, i learn a lot here, thanks.. but i had trouble with : import.meta.env.BASE_URL... so i change it to process.env.BASE_URL,.than it started to show things in browser...so if anyone have same problem, try to use process...it is strange cause import should work with vue 3..it is prob a matter of project setup, tooling versions, or specific configurations.

@klirmio21 Жыл бұрын

why my Card.vue component is not highlighted into green like on the video when I add it to my VS code? I have all the extensions

@Tobsson Жыл бұрын

Might be a theme thing.

@flutter180 Жыл бұрын

JSON data for project 3: drive.google.com/file/d/1KT0mOrEeIkBBdrzI1paZiTzIYFevmBZB/view?usp=share_link

@antonyministrov7560 Жыл бұрын

Thanks Zack to upload this file, you are awesome, I would not do this project without it)))

@dewaputusudewasuambarayana9408 Жыл бұрын

thank you for uploading this data bro

@josbexerra8115 Жыл бұрын

gracias mister zack

@go_lang_thang 9 ай бұрын

omg thanks u a lot bro oiw

@doubleyousl3726 Жыл бұрын

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

@roy_xxiii Жыл бұрын

Where is the attached source code ?

@ren97x Жыл бұрын

BRO GOOD EXPLANATION REALLY UNDERSTAND IT

@jordanbarba7921 Жыл бұрын

When trying to emit isCorrect, i am getting that it is undefined, and i dont know why, has there been an update or something? i am using vue 4.2.1

@twesigyeronaldk 4 ай бұрын

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

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

@somayehheidari8880 Жыл бұрын

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

@chethnik Жыл бұрын

Thanks i want to continue that course, but on udemy the course is not structured in projects, i dont know where to begin on the udemy course, thats a thing u can improve in my opinion, so where to begin if we did all the projects of this youtube video, where actually begins project 4 on udemy course... ?