Vue 3 and Composition API - Building an Expense Tracker Application

Build an expense tracker application from scratch using Vue.js 3 and the Composition API in this comprehensive tutorial. Learn to set up Vue.js, create and import components, implement global state management, and utilize key Vue 3 features like defineProps and defineEmits. Explore how to display transaction lists, calculate balance and income/expenses, create forms with input binding and validation, and manage data persistence using local storage. Follow along with step-by-step instructions, including file structure setup, component creation, and implementation of core functionalities such as adding and deleting transactions. Gain hands-on experience with Vue 3's latest syntax while building a practical, real-world application.

- Intro & Demo
- Vue.js Setup
- File Structure
- Boilerplate Clean Up
- Create Component Files & Templates
- Create and import Components
- TransactionList Display
- Transactions in Global State
- Pass & Recieve Props defineProps
- Balance Component & computed
- Income & Expenses Component
- AddTransaction Form Component
- Binding Form Inputs
- Validation & Toasts
- Emit Custom Events defineEmits
- Add Transaction to State
- Deleting Transactions
- Fetch From Local Storage & OnMounted
- Save to Local Storage