Traversy Media | Vue 3 & Composition API - Full Project @TraversyMedia | Uploaded 9 months ago | Updated 3 hours ago
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:
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
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:
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