Vue.js 3 Expense Tracker Overview

Aug 21, 2024

Vue.js 3 Project Overview

Introduction

  • Building an application using Vue.js 3.3 and the Composition API
  • Importance of the Composition API for component structure
    • More organized logic structure
    • Promotes reusability, readability, and reactivity

Project Description

  • Project involves tracking income and expenses
  • Key features:
    • Total balance display
    • Separate income and expense balances
    • Transaction history with different styles for income and expenses
    • Form for adding new transactions
  • Local storage functionality for data persistence

Project Setup

  1. Create Vue App
    • Use Vue CLI with command: npx create-vue@latest .
    • Answer prompts (No for TypeScript, Router, State Management, Testing, ESLint)
  2. Install Dependencies
    • Run npm install
    • Start dev server: npm run dev

Understanding Project Structure

File Structure

  • package.json: Main dependencies (Vue) and Dev dependencies (Vite - local dev server)
  • index.html: Single page application structure with script tag for main.js
  • main.js: Entry point for Vue app, imports main component and CSS
  • App.vue: Main component that will house child components

Components to Create

  • Header.vue
  • Balance.vue
  • IncomeExpenses.vue
  • TransactionList.vue
  • AddTransaction.vue

Component Implementation

Header Component

  • Simple header with H2 tag

Balance Component

  • Displays total balance

IncomeExpenses Component

  • Shows total income and total expenses

TransactionList Component

  • Displays a list of transactions
    • Uses v-for to loop through transactions
    • Conditional classes for income (green) and expense (red)

AddTransaction Component

  • Form for adding transactions
  • Submits data and validates inputs
  • Uses toast notifications for user feedback

State Management

  • Utilize Vue's reactive properties for managing state
  • Use ref for reactive values in Composition API
  • computed for calculating total income and expenses based on transactions

Local Storage Implementation

  • Check local storage for existing transactions on mount
  • Function to save transactions to local storage on add/delete
    • Uses JSON.stringify to convert array to string
  • Update local storage every time a transaction is added or removed

Key Takeaways

  • Composition API promotes cleaner code structure
  • Efficiently handles state and reactivity in Vue
  • Local storage enhances user experience by persisting data
  • Application functionality includes adding, deleting, and viewing transactions

Conclusion

  • Successfully built a reactive expense tracker with Vue.js 3.3 using Composition API
  • Encouraged to extend functionality further (e.g., editing transactions)
  • Emphasis on the ease of use and organization with the Composition API vs. Options API.