Vue 3 & Composition API - Full Project

Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.
Final Code:
github.com/bradtraversy/vue-e...
Vanilla JS Project Repo:
github.com/bradtraversy/vanil...
Blog Post:
www.traversymedia.com/blog/vu...
Check Out My Courses:
traversymedia.com
Timestamps:
0:00 - Intro & Demo
3:21 - Vue.js Setup
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.

[@wovasteengova]

ya me too. I am going to stick with them.

[@shawnshaw9859]

@@wovasteengova me too, the only true community based frontend framework while react lost it way and svelte got bought up

[@xbmcme9768]

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!

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

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

[@febryanakhdani4244]

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

[@mariusvranceanu8595]

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

[@user-fj7df3ng7z]

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

[@STR2060]

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.

[@mouradeljayi584]

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

[@TraversyMedia]

No problem. Thanks for watching! I will be doing a Vue course at some point next year. Which also means more Vue KZbin content as well.

[@rajeshbudhathoki7888]

WOW! 🤩@@TraversyMedia

[@mahmoodbina2193]

@@TraversyMedia pleaseeeee do it !!!! Even in your website , we will buy and support

[@mounir101]

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

[@asadmalik5075]

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!

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

[@caaltz]

I tried to learn react 4 times, every time I get bored to death and feel no joy at all, I use at my work sometimes to adjust some projects from the guys that leave, my boss just decided to use Vue with our Laravel projects and I'm really happy about it!

[@matthewcorbett8637]

Ive been building a passion project in Vue the last year! Cant wait to use this toast lib to add a little pazaz to my UI 😊 Thanks Brad!!

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

[@Aeric80]

I strongly agree with you. Brad explains the concepts and practical in a very straight forward and concise way where I find other videos are long winded and confusing.

[@paulthomas1052]

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

[@allprowebdesigns917]

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

[@prasannabakare0456]

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

[@TraversyMedia]

It really is super straightforward. I love React, but there are a lot of quirks to get used to.

[@neneodonkor]

Me too. 👍🏾👍🏾👍🏾

[@Patrick-jn9je]

Your tutorials are really easy to digest. That 1 hour just passed by so quickly.

[@modris2980]

Thank you so much for creating this tutorial. A total beginner here and it's perfect.

[@amidipu]

Great tutorial. specific and no boiler plate talks as always from you, like it 🙂

[@Viralplace]

Wooow thanks Brad from Italy! I love vue, hope to see more video about that and vite + pinia

[@JuanPalominoMusic]

Thanks for this tutorial, helped me transitioning from Vue 2 to Vue 3.

[@derricknjoroge2494]

Looking forward to learning here

[@_moxy9905]

Yeaaaaaaaa, best framework ever 🎉🎉🎉

[@caaltz]

Thanks Brad, your content is excellent. Love your teaching style

[@stephenng4036]

I have no choice but give a big like to this wonderful tutorial.

[@Cire-my6ur]

You have always been really good at explaining how things work. Just explaining simply, how the il hover and transition works was extremely helpful. I hate css; always confuses me. Good video and perfect for someone that wants to get a better idea of how Vue works if you’re trying to incorporate it into your project.

[@fvgoya]

Great content as always Brad. Will be also awesome see some videos about Nuxt. Thanks Brad!!

[@DaniilTheCoder]

Огромное спасибо за написание небольшого приложения на Вью! Как раз после изучения документации хочется закреплять знания, что-то подглядывать у более опытных разработчиков 🤝

[@UberDurable]

Excellent as always, much appreciated.

[@andresgarciaalves]

Thank you Brad, awesome content 😊

[@jarabialex]

Awoohoo! Looking forward to coding along

[@michaels.5001]

Absolutely great tutorial, mega well explained.

[@GilAguilar]

Nice I know this is going to be great! Once that music starts and your voice is heard. My laptop says , let’s do this 🤟💙💪🏽☕️

[@TraversyMedia]

Awesome!

[@wb2c0]

hands down the best teacher

[@alques-dias]

Awesome job, please make more content with Composition API

[@je-suis-alin]

I'm here just to say "Hi!" to Brad! You are awesome, as always!

[@olalekanidowu7078]

This is very great, thanks Brad

[@user-st3ek4lq2l]

Tutorial is awsome, just what i need!

[@greatssmartnetsystems]

Just on point. 🎉 thank you

[@sogbeydaniel8074]

❤. Just started learning Vue about a week ago

[@Coderdawg]

How’s your learning going so far?

[@sandeshshrangare]

I'm also learning vue js .. is it worth it. Cus. Of im scare about all these things

[@kingvas7638]

Best frontend framework!! Vue❤

[@selviaantoine5701]

Thank you so much Brad.

[@dennismuthomi712]

Thank you Brad!

[@munraitoo13]

Thank you for your knowledge!

[@salmanahmedkhan3979]

great video. now i can do the tasks of my job.

[@jonl316]

Love this content. Vue is the way to go.

[@iUmerFarooq]

Love to see Vue content on your channel. Want to se Nuxt 3 also. Make some fullstack projects in Nuxt 3. Thank you ;)

[@Viralplace]

Yeeesss a MEVN stack!

[@codedjango]

Thank you so much for this Vue tutorial

[@doyouknowthishacks]

You Explaination is awsome .... dear.... and also conent project is excellent.... keep it up dear

[@glatocha]

ha, love it, Exactly what my next APP will be. But on top of what you have I will have supabase behind the data and quasar to help out with workflow and UI components

[@MacKoslowski]

Chose Vue for work projects and haven't regretted it. Give it a shot!

[@neneodonkor]

I presume you work as a freelancer.

[@m3-dev]

Thanks!!! great explaination. now to try it on my own 😜

[@gogoikabir]

Thank you for the video ❤

[@VitaliySunny]

Thanks, very cool project.

[@peterpen983]

Good job my bro!

[@yugeyuge8008]

Thanks for the good tutorial.

[@chandrachurmukherjeejucse5816]

Goated Lecture fr.

[@geek_muslim]

Thanks bro this was awesome

[@ilyasbenihia869]

I love Vue and i love you content

[@raksmey9780]

superb turtorial

[@kendouciabdelaliilyas]

Thanks Brad. I hope some contents for Nuxt 3

[@atlantisuds6625]

Thank you for your video. I'm new in Vue, and this tutorial taught me a lot of basics. I hope you can make better and better videos!

[@MonirSaikat]

hey

[@gadgetkh9408]

Great content. Thank you! Can you please also create video of Vue3+ionic+capacitor?

[@ionelgis]

Love Vue with composition api. It's also very similar to Svelte

[@chungtunguyen6135]

thanks for this tutorial! it's very helpfull!

[@machelealhassan1496]

Superb!

[@user-ye1xz3xx2u]

thank you so much!

[@akashshetty6422]

thanks for the video

[@user-vn2ot8pd9r]

You are awesome... Like always ❤👍

[@user-ii6rb6nw8c]

thank you so much

[@IT_with_Glitch]

Brad loves from costa rica mate, hopefully one day i will appear on one of your videos.

[@basicsprogrammingandelectr3043]

it's really good, helpfull video thanks vary much

[@isaacqadri]

Vue3+composition api❤❤❤

[@johnacsyen]

Great tutorial. Learning Vue for first time. @1:05:05, Coming from React, Vue seems easier

[@adriancastillo3370]

THANK YOU

[@nadetdevfullstack7041]

Excellent

[@kurshadqaya1684]

Then only channel I just press like no matter I watch or not.

[@TraversyMedia]

It's appreciated 👊

[@claudiocl8937]

Nice tutorial

[@user-bh7pe9ti7f]

Thanks you so much

[@zuberab5405]

welcome back

[@allenboniface8010]

Watching from Tanzania

[@bwanamaina]

jambo kaka 😂

[@josoataryll4077]

Thanks😊

[@Bella_Will]

Great! Please can you create a content on API endpoint documentations.

[@WESHAREknowledge]

thank you

[@user-du8lw4ur6v]

Thanks alot

[@user-su4rd3ml8b]

brad is like that awesome older brother figure we never had, love you man thanks a lot for all these years

[@addoconstant]

Vue is the best js frontend framework. the implementation is seamless

[@da_stoaz]

Really appreciate this tutorial. But which VSCode extensions do you use?

[@0Xmo]

u are the beeeeeeeest ♥

[@mylesdavies9476]

❤ Vue 😊

[@user-fj7df3ng7z]

Just an idea, Brad, but I had an idea that might appeal to you: with the finished program from this video as a starting point, revise it to incorporate Pinia for all state management and local storage. I'm thinking of making that change in my own code....

[@teckyify]

I can remember using the compositional api 1 or 2 years ago without the script setup tag. However, besides the convenience of not having a components object it looks actually more unorganized than having the traditional structured default object.

[@TraversyMedia]

I can see your point. I was a big fan of the options API and was turned off from the whole setup() function. I do like the new syntax though. I'm a big fan of the more vanilla-like just create variables and functions and they just work. It's really just preference. I'm glad the options API is still an option though. No pun intended lol

[@dgloria]

Fab! Will do this asap. Does it use pinia? Does it use components from a single external source? I was never able to understand how to make buttons, modals etc as reusable components in Vue3. :)

[@AgostinoManea]

Thankyou, very usefull nice and clean. Just a question for my ogni clarification as js is not my main stuff. Back in v2 days I happened to work in a vue 2 project. There I used the Vuex methods to alter the data at the app level rather than emitting events from the component… mind some time has passe and my memory might be failing…. Is that still a thing or the emit is the v3 Wagner to go?

[@neneodonkor]

With what I have learned so far, Pinia is now the official store manager for Vue. Perhaps, it operates in a similar way.

[@Aeric80]

Hi Brad, I am a bit confuse when writing defineProps, there is no variable call transactions but you can reference the transactions prop in the component. edit: sorry, I rewatch and saw it. It is one level up from the type and required.

[@user-lp6qg8kx4v]

What extension do you use for Vue on Visual Code?