Vue 3 Crash Course | Project From Scratch

Timestamps:
0:00 Introduction
1:30 Prerequisites
2:23 What is Vue?
4:58 Why use Vue?
5:52 Why Vue over React/Angular?
7:07 Vue SFC's
8:02 Github Repository
8:25 Section-1: Create Vue Project
10:12 How Does Vue Work
15:18 Overview of Vue Project
19:21 Section-2: Project Cleanup
20:48 Section-3: Install Project Dependencies
21:52 Section-4: Simple Global Styles
23:29 Section-5: Navigation Component
29:11 Section-6: Todo Creator Component
38:17 Section-6: Emit Custom Events
46:27 Section-7 Todo Validation
57:20 Section-8 Slots
1:01:10 Section-9 Todo Item Component
1:20:58 Section-10 Toggle Complete Todo
1:27:38 Section-11 Edit Todo
1:33:47 Section-12 Delete Todo
1:36:26 Section-13 Save Todo's To LocalStorage
1:41:40 Section-13 watch()
1:46:00 Section-14 Completed Todos State computed()
1:50:40 Creating Additional Routes/Pages
1:53:56 Deploying To Netlify
1:57:35 What's Next?

#vue #vue3

[fkdlb]

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

[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

[millennialsdev]

Little tip: RouterLink can be written also <router-link> 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 <h1> tag twice. In the header and inside a main. This is an error
- After the <ul> tag is better to put the <li> tag and not directly the <a> tag

Thanks for your content John, Vue is my favorite framework

[JohnKomarnicki]

A couple updates:


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


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.

[anilnelli]

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.

[olegparamonov]

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!👍💪

[STR]

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

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

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

[JustJaylonX]

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

[codetechpro]

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

[JulioCesar]

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

[duducm]

This was insane. Thanks for the course!

[prasannabakare]

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

[mateusz]

Awesome course, keep up the good work!

[bitace]

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

[danielalonsomaqueira]

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!

[jose-kbdg]

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👍 😀🙏

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

[attiliop.]

This was a great video! Thanks for the refresher.