YoVDO

Vue 3 and Composition API - Building an Expense Tracker Application

Offered By: Traversy Media via YouTube

Tags

Web Development Courses Javascript Courses Form Validation Courses User Interface Design Courses Local Storage Courses Component-Based Architecture Courses Composition API Courses

Course Description

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
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 Service
University 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