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.

3-Hour Vue.js Crash Course:

https://www.youtube.com/watch?v=VeNfHj6MhgA

Final Code:

https://github.com/bradtraversy/vue-expense-tracker

Vanilla JS Project Repo:

https://github.com/bradtraversy/vanillawebprojects

Blog Post:

https://www.traversymedia.com/blog/vue-expense-tracker

Check Out My Courses:

https://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