Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Vue 3 and Composition API - Building an Expense Tracker Application

Traversy Media via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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.

Syllabus

- 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

Taught by

Traversy Media

Reviews

Start your review of Vue 3 and Composition API - Building an Expense Tracker Application

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.