Vue 3 Crash Course | Project From Scratch

[@fkdlb126]

Excellent tutorial, uses simple language, not only tells you how to do it, but also tells you why, and compares different scenarios. Thank you!

[@millennialsdev]

Little tip: RouterLink can be written also and you can also avoid to import that! Exactly! This is a global component in vue 3 so it will still continue to work P.s I think that there are a few of little errors in this video (just about semantic about html): - You put tag twice. In the header and inside a main. This is an error - After the tag is better to put the tag and not directly the tag Thanks for your content John, Vue is my favorite framework

[@JohnKomarnicki]

Oh instresting, I wasn’t aware of that with the Router Link. Yeah, I’m still trying to get better with semantic HTML! I appreciate that! 😀

[@cannabisanomaly]

Amazing course, thank you so much for this, John! The level of detail you go into is wonderful and miles above the usual "code-along" tutorials. I wanted to mention at 41:05, defineEmits() doesn't need to be imported, nor does defineProps(); that setup attribute that's included in the script tag allows for those macros to be compiled at run-time, so no imports are necessary for them

[@Pekillen13]

I am a React dev preparing for a jump to Vue. I really appreciate this tutorial, as it was concise, and professional, and I feel like it equipped me with the essential tools to get started. Thanks a lot, and lots of luck to you!

[@anilnelli5046]

This is an excellent tutorial, i had ever come across for someone who has basic knowledge in HMTL, CSS and JavaScript. Well planned and excellent detailed walk through of code.

[@STR2060]

Brilliant video with sophisticated production skill ! Helps me a lot in my graduation project !

[@olegparamonov7670]

This is the greatest Vue-crash course ever which I saw on youtube. Thanks for such simple explanation of all this stuff. You helped me to answer to a lot of questions!👍💪

[@JohnKomarnicki]

Really glad to hear that!

[@adsaviation]

What an excellent crash course this is. I did check out many, but this one is 'just right', no information overload, to the point!! I am a fan now. And will be 'Joining' (as soon as I am back in the USA, weirdly enough, I cannot pay from the Netherlands) as I think someone who takes the time and the energy to show this in such a clear understanding way, is worth every penny. And I will check out your other courses as well, as I do not think I was ever this fast learning a new language, ever!!

[@JohnKomarnicki]

That is awesome to hear! Glad it's been helpful! I do have a Nuxt 3 course that i'm working on and should be partially releasing in the upcoming weeks!

[@millennialsdev]

I love your method to teach! I come from Italy and your english is very easy to understand. I hope to see the full course with vue 3 + pinia and vite.js, maybe also with a MEVN project!

[@JohnKomarnicki]

I have a full stack project using Vue, Pinia & Altogic to create a Instagram clone that should be releasing sometime in March

[@okbaalla8451]

​@@JohnKomarnickistill waiting john, that would really help a lot ❤❤❤❤

[@JustJaylonX]

This has been a wonderful resource for my journey of learning front-end frameworks. Thanks :)

[@prashlovessamosa]

Will wait for that course.

[@jose-kb1dg]

This is the best Vue tutorial for beginners, Easy explained, not several hours long, and a very good start to develop the knowledge in programming. There is much more you can do and explore. Thank you very much👍 😀🙏

[@JohnKomarnicki]

Glad this was helpful!

[@mateusz8664]

Awesome course, keep up the good work!

[@Stretsh]

Awesome crash course! Thanks a million! There is very little available about using Vue with Composition API Some honest feedback: You are using "What we/you [wanna/gonna/going to/could] do, is..." a lot! Like within every 3 to 4 sentences, on average.

[@JulioCesar9482]

Amazing tutorial, really helped me! Just signed to full stack course wait list.

[@1duducm]

This was insane. Thanks for the course!

[@pooyagoodarzi2775]

Thanks for the amazing content , Also great job explaining the Vue3 features

[@codetechpro]

Best todo app project tutorial I have seen, Thank you I practice throughout the whole project

[@JohnKomarnicki]

Great to hear, thank you! 😁

[@aditijain2448]

I just feel some of the main features such as editing, checking out items from the list are not quite explained here, got from the repo tho 👍

[@bitace]

Lovable course! A Nuxt 3 crash course like this would be amazing

[@JohnKomarnicki]

Currently working on a full course for nuxt! I’ll be releasing a crash course portion here on KZbin before the end of the year!

[@kf_11]

Good course, easy to follow and covers lots of Vue tools.

[@TshepoMahudu]

Thank you for this crash course it was very helpful, and I am going to follow some of your tutorials. big up

[@attiliop.8639]

This was a great video! Thanks for the refresher.

[@prasannabakare0456]

love your videos John. Learned so much from you. Thanks to you I was able to start my own tech blog using Vue

[@JohnKomarnicki]

Thanks, I appreciate that. Glad to hear!

[@danielalonsomaqueira7839]

Thank you! This was a really great, fast and well explained course. I was able to understand everything easily. Im waiting for the nuxt course!

[@JohnKomarnicki]

Super glad to hear! Working on it as we speak! 😎

[@Anandmum]

Dear John, your Vue tutorial videos help me so much, please make a video tutorial about Vuestic Admin. Thank alot.

[@devshakilahmed]

great course, and I appreciate your hard work. I've learned a lot from it. Thanks.

[@JohnKomarnicki]

Glad to hear! 😃

[@da_stoaz]

Really well-organized Tutorial, thanks a lot! But why does Stripe want my Phone number and my ID Through a Driver's License or Passport??

[@bavishkasathyanjana1384]

This is Gold

[@JohnKomarnicki]

Thanks a lot! 😄

[@a_basic_sheep_1993]

Thank You. You Explained everything very well.

[@cryptoboy1461]

Beautiful ♥ Thank you!

[@abiodunhodonu1340]

Very interesting method of teaching. Thank you for this! subscribing right away.

[@user-px2jq1bm8t]

why does the higher load performance impact SEO negatively? Can anyone explain it?

[@ruksharalam173]

One of the best vue crash courses to get one started with vue.

[@islamahmad9]

Thank you so much, Excellent tutorial

[@Lucas-av7]

Nice crash course, with a good pace. thank you!

[@JohnKomarnicki]

I appreciate the feedback! 🙌

[@SkeechFab]

Super nice thx! Can you show how to integrate postgresql?

[@caaltz]

Thanks John amazing Crash Course

[@JohnKomarnicki]

I’m glad it was helpful! 🙌

[@hamayunkhan8088]

Thanks for the knowledge!

[@joaquin4108]

Great Video! Thanks for your work!

[@JohnKomarnicki]

Thank you!

[@infas_mhd]

Timely and Best

[@sweatdog]

Having trouble with the deploy to Netlify. I have connected my repo and Site Overview > Production deploys shows "Published". When I click the link at the top to navigate to my app the resulting page is a "Page Not Found" error. Did I miss a compile + minifiy step for production? There are no errors on my Site overview page. EDIT: fixed this by redefining root folder in my repo. Netlify was not seeing my index.html.

[@JohnKomarnicki]

Ah! Glad to see you were able to get this fixed!

[@yar4468]

Thank you so much for this tutorial!

[@DanielTames]

Excelente video John!

[@JohnKomarnicki]

Thanks Daniel!

[@sensen9235]

wouldnt the delete method be really shit since it has to loop through all the todos

[@TruthSeekerClub]

coolest crash course ever

[@h.t.8812]

I tried to deploy and it didn't work :( both in vercel and netlify, anyone else?

[@farhana5499]

why is the delete functionality using id and the others are using index? can we use index since isn't id and index practically the same thing?

[@spahks]

You're right. Theoretically you could only use one of them. But in this case it's just easier to manipulate the data with index and deleting an item with the id using the filter method.

[@wEbCoAdEr]

Thank you for this outstanding contribution sir!!

[@kk-xw5hn]

Thank you from Japanese programmer !

[@soonduck9410]

Which plugin should I use for the result in blue text next to the console.log?

[@JohnKomarnicki]

It’s called console ninja!

[@JohnKomarnicki]

📕Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/tqrmw (Ad Free - Now on gumroad) 📕 Nuxt Course: www.learnnuxt.dev/ A couple updates: 37:47 - There is some more advanced differences between ref() & reactive(). The way we will be using them both within this course will not expose those advanced differences. If you want to learn more on these i created a video covering them in more depth. kzbin.info/www/bejne/hZK4oXivr5mtrtU 41:00 - The defineEmit is a macro within Vue. You do not need to import it like i did within this section. 55:30 When we are performing the "class binding" using the ":class", this is a shorthand for what is called the v-bind directive. Which is how you bind data to items within the template. So the full version would look like this "v-bind:class" Vue offers a shorthand, which is just ":". Throughout the remainder of this course we will use the short hand to bind data to different attributes within the template. 1:19:00 When using the v-if directive with the v-else directive, they need to be done in a sequence. Meaning that it can only be used on the next element in the template after a v-if directive 1:50:51 One thing we did not cover in regards to routes/pages is how to set the page title within the tab. I have a quick separate video you can watch on how to do this. kzbin.info/www/bejne/jWfUoaajoNp9bsU Hopefully you enjoy the crash course. if you see anything else just be sure to leave a comment and i'll try my best to reply.

[@draj3214]

@1:19:00 worth mentioning v-if/else directives have to be used sequentially following the element the v-if sits on, otherwise the v-else (or else-if) will not be recognized

[@JohnKomarnicki]

@@draj3214 I did mention this later within the video. But yes that is a valid point! Thanks for pointing this out

[@draj3214]

@@JohnKomarnicki oh my bad. must have missed it.

[@JohnKomarnicki]

No worry, definitely should have mentioned this within this section!

[@TariqAli-nm1vc]

I am unable to find this code in your github.

[@yordanyordanov5258]

This tutorial is great! But when coding it myself I stumble upon following issue: uid() function is not working properly. It prevents todos from storing in array! Anyone any suggestions?

[@JohnKomarnicki]

Did you import it into the component?

[@yordanyordanov5258]

@@JohnKomarnicki Yes, I did it. It finally worked after endless dev server restarts, vs code restarts and finally getting latest uid version, but frankly, not sure what did the magic. Cost me several hours to get it done your way,😀 but I shall not surrender. Thank you very much!

[@kvelez]

9:20 I would like Vue + TS.

[@dfordemo981]

excellent and super awesome ❤❤

[@tone1245]

my terminal isn't able to run the 'npm run dev' command from vs code smh. Any tips for a beginner?

[@JohnKomarnicki]

Did you install all the dependencies? Also, are you in the correct folder with the vue app in the vs code terminal?

[@tone1245]

@@JohnKomarnicki Yes. I can run the command in my cmd but not vscode terminal. I deleted and added the vscode path in my environment table too.

[@cannabisanomaly]

A little late in getting to this, but did you figure it out? Do you have node installed? You can check to see if it's installed by running the command: node -v in your terminal and it should produce some version number (ex. v20.11.1)

[@suhardy003]

38:17 how to do it in setup() {....) ?

[@HaifengZhu-pn3uq]

Look forward to react tutorial

[@simplethings8112]

Very relevant tutorial. Thanks!🥰

[@JohnKomarnicki]

Thanks! Glad you thought so!

[@mehmetaltinsoy525]

Great video. Thanks.

[@thor0911-fo]

Thanks. You are great!!

[@JohnKomarnicki]

Thanks, i appreciate that! 😄

[@rhino_interactive]

I think I heard "to do" about 10000000 times 😅😅 great tutorial btw!

[@Free--Soul]

Great job John..I am waiting for your new contents on KZbin and on Udemy..

[@TomášSlezák-s6d]

Greate video, thanks for sharing.

[@albertoginelsalvador2172]

So Good!!

[@budzmarooo5363]

Superb!! 🎉

[@JohnKomarnicki]

🙌

[@RianY2K]

Thank you for tutorial 😄

[@Simon-lk6ky]

nice job! subscribed

[@JohnKomarnicki]

Awesome, thank you!

[@johnmarkbondad6009]

excellent tutorial. do you have vuex tutorial?

[@JohnKomarnicki]

Not with Vuex, but I do have a pinia tutorial, which is now the recommended library to use for state management within Vue 3. Introduction To Pinia | Vue 3 kzbin.info/www/bejne/najGlJSVr8lnf6c

[@johnmarkbondad6009]

@@JohnKomarnicki thanks

[@rem2764]

useful for me, thanks

[@nxone9903]

so much better than react

[@rohanpandey3704]

Great tutorial !!

[@JohnKomarnicki]

Thank you!

[@batuhankir8402]

thanks a lot great job

[@guilhermegirardi]

Awesome!

[@JohnKomarnicki]

Thanks!

[@西边皆通]

Good job

[@xitan4194]

Thanks!

[@JustThink2000]

How can I get the discount code?

[@JohnKomarnicki]

johnkomarnicki.gumroad.com/l/tqrmw

[@JustThink2000]

@@JohnKomarnicki thx

[@prashlovessamosa]

Hey yo thanks 🙏

[@ahmedsamy9999]

Vue darggable not working with project 😥

[@JohnKomarnicki]

I was going to do a couple of follow up videos, implementing some features with various libraries. This is one of them. So stay tuned for that video

[@johnnydriesen7575]

Looking forward to the follow up vids as well. Thanks in advance, ​@@JohnKomarnicki

[@leafaravlis7361]

thanks!

[@IoSuAu]

This tutorial could have been 1hr instead of 2 if it wasnt for all the styling 😅, its good tho

[@klirmio21]

my brain is gonna blow up right now.........................................

[@dmkhiladi]

I have a Mac !

[@dmkhiladi]

yee !

[@Benthetech-qn2lf]

❤❤❤

[@ondrej689]

18:37

[@TheChyamp]

Tash. All tutorials using the ToDo example from Vue lol

[@JohnKomarnicki]

*trash, but thank you for taking the time to comment :)

[@tommyshaw2420]

@@JohnKomarnicki The nerve of some people lol. Just got a good laugh about it though! Dude is watching your video and commenting and helping you out with the algo without even knowing, the stupidity of some people, I bet he is still stuck at hello world

[@trailerhighlights8349]

Awesome tuttroial but my head remebers only : TO DO TO DO TO DO TO TO TO DO TO TO DO LIST TO DO TO DO

[@feifeilooper8312]

Excellent contents

[@JohnKomarnicki]

Much appreciated!