Vue 3 and Composition API - Building an Expense Tracker Application
Offered By: Traversy Media via YouTube
Course Description
Overview
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
Related Courses
Software as a ServiceUniversity of California, Berkeley via Coursera Intro to Computer Science
University of Virginia via Udacity Web Development
Udacity Software Engineering for SaaS
University of California, Berkeley via Coursera CS50's Introduction to Computer Science
Harvard University via edX