Vue 3 & Composition API - Full Project

Final Code:

Vanilla JS Project Repo:

Blog Post:

Check Out My Courses:

Timestamps:
0:00 - Intro & Demo
4:57 - File Structure
7:44 - Boilerplate Clean Up
9:06 - Create Component Files & Templates
12:30 - Create and import Components
18:50 - TransactionList Display
28:37 - Transactions in Global State
30:12 - Pass & Recieve Props (defineProps)
32:30 - Balance Component & computed()
37:21 - Income & Expenses Component
42:34 - AddTransaction Form Component
44:58 - Binding Form Inputs
46:41 - Validation & Toasts
52:05 - Emit Custom Events (defineEmits)
54:45 - Add Transaction to State
59:30 - Deleting Transactions
1:03:30 - Fetch From Local Storage & OnMounted()
1:06:09 - Save to Local Storage

[Zetlify_Official]

In the world of popularity, I decided to stick with VueJS, Thank you so much Mr. Brad for another inspirational video.

[xbmcme]

I've been watching your videos for a while now. It was your videos that got me started on programming. 5 years laters, you're still cranking out banger content. Thanks!

[mariusvranceanu]

I finished your JS from scratch course a few weeks ago and started doing projects, got the hang of it and tried React . Wasn't my cup of tea, especially having used SvelteKit a bit, but Vue, I like their background story a lot and I picked it up yesterday and It just happened that you uploaded a Vue 3 video. Awesome! Thank you!

[cecitorresmx]

Thank you Brad, thanks to you I got my first job as frontend developer 5 years ago, Your course for Vue.js helped me a lot with the interview and my first months there. Now I'm looking for a new position and I was looking for some recap in Vue 3 for my next job interviews and I found your video! I'm sure I'm going to repeat the same good luck :)

[junior.santana]

Great tutorial!
I'm new to Vue and even though I had already seen all the stuff you showed, it was really good to understand better the composition API.
Also, it's always good to see tutorials with a nice UI and covering all functionalities like that

[STR]

Your explanation of these Vue's basic concepts is just so straightforward. Unlike some guys who will spend 100, 000 years to describe it's features whatever before show me the practical usage.

[MuratcanBerber]

I watched maybe a dozen different Vue 3 Composition API tutorials, and this is the one that made me really understand these concepts. Props, emits, life cycle functions... it's more than just a crash course. As always, Brad, you made my day and really showed how good your tutorials are. Your ability to teach is exceptional. The world is a better place because of you. Thank you for the video. I hope you will continue to enjoy creating content to make software really fun and understandable. Thank you again.

[febryanakhdani]

just trying this vue tutorial 3 days ago and finally I can understand about the props and emits concept. such a great and amazing video. I hope you can continue the tutorial of vue 3. thanks you so much

[beakdan]

Thank you! I started to learn vue recently after more than 15 years of not working with web technologies and was confused about a lot of things. I followed religiously the instructions of your other vue video but I was still confused and learning the "setup" style. This video answered my questions, now I clearly understand the purpose. Again, thank you!

[fjdfngz]

Excellent course, Brad! I just completed a Vue basics course on another channel and was going to start writing my own code right away but decided a little more practice would help, as would hearing things explained by a different person. I'm glad I went that way! I now understand several things better. As a huge bonus, you finally cleared up the difference between the options API, the composition API and the composition API with the <script setup> tag, which had REALLY been confusing me in various examples I had been examining. That alone is going to make my future coding projects easier! I've done several of your courses now and they are consistently excellent so thank you VERY MUCH for doing what you do so well!

[prasannabakare]

Vue JS soo easy to implement especially in composition API. I prefer it more over react.

[mouradeljayi]

Glad you are still uploading Vue JS content.. Thank's Brad !

[namaefumei]

My god I love Vue. I had to use react for a company project for a year and every second I thought there is an easier way in Vue

[mounir]

Glad to see you again in this new Vuejs tut. Pretty awesome, and thanks so much Mr. Brad

[cheesypizzajokes]

Coincidental that I decided to learn Vuejs properly today with your 2021 Vue js crash course, got to where you said you werent covering composition api, googled to see if you ended up making that separate vid, and whaddya know, published "3 days ago"

Thanks as always, Brad

[allprowebdesigns]

Good to see you back with a Vue JS tutorial and the composition API for Vue's reactivity components.

[muniappanmurugavelu]

Thank you Brad for all your Videos, I was a Java Backend developer earlier and your Angular and Js videos helped me to become as a full stack Developer. Whenever i finished watching your videos. I always felt confident that, i can do something with the topics i learned and implemented it .
Your concepts explanations are Crisp and clear.
I wish you, have a good health and all the best...

[asadmalik]

Wow so much straight forward since I am a React Developer I am impressed how the Vue works

[SamuelCoupland]

Thank you for this! Really helpful for a crash course before an interview where they use Vue. Coming from React it was just a perfect overview, and plenty of times I went off to the docs and learnt something new about Vue. Thank you again Brad!

[paulthomas]

Great demo as always - well paced and full of relevant real-word content. Thanks !