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.