A modern Vue 3 budget management application built with Vuetify 3, TypeScript, and Pinia for state management. This application provides comprehensive financial tracking with transaction management, recurring payments, tag categorization, and interactive dashboard charts.

• Transaction Management: Create, edit, and delete transactions with amount tracking in GBP
• Recurring Payments: Set up and manage recurring transactions
• Tag System: Categorize transactions with custom tags and colors
• Interactive Dashboard: Visual charts showing spending patterns and cash flow
• Dark/Light Theme: Toggle between themes with persistent preferences
• Responsive Design: Works seamlessly on desktop and mobile devices
• API Integration: RESTful API integration with authentication via API key

src/
├── assets/                 # Static assets (CSS, images)
├── components/            # Reusable Vue components
│   ├── charts/           # Chart components (DashboardCharts.vue)
│   ├── forms/            # Form components (MoneyInput.vue, TagMultiSelect.vue)
│   ├── icons/            # Icon components
│   └── shared/           # Shared components (ThemeToggle.vue)
├── composables/          # Vue composables
│   ├── useApi.ts         # API client with authentication
│   ├── useMoneyFormat.ts # Currency formatting utilities
│   └── useSnackbar.ts    # Global notification system
├── pages/                # Route components
│   ├── DashboardPage.vue # Main dashboard with charts
│   ├── TransactionsPage.vue # Transaction management
│   ├── RecurringPage.vue # Recurring payments
│   ├── TagsPage.vue      # Tag management
│   ├── SettingsPage.vue  # Application settings
│   ├── LoginPage.vue     # API key authentication
│   └── NotFound.vue      # 404 page
├── plugins/              # Vue plugins
│   └── vuetify.ts        # Vuetify configuration
├── router/               # Vue Router configuration
│   └── index.ts          # Route definitions
├── stores/               # Pinia state stores
│   ├── session.ts        # Authentication state
│   ├── transactions.ts   # Transaction data
│   ├── recurring.ts      # Recurring payments
│   ├── tags.ts           # Tag management
│   ├── reports.ts        # Analytics data
│   ├── theme.ts          # Theme preferences
│   └── settings.ts       # App settings
├── __tests__/            # Unit tests
├── App.vue               # Root component
└── main.ts               # Application entry point

• Node.js 18+
• npm or yarn package manager

1. Clone the repository

   git clone <repository-url>
   cd budget-vue

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:5173

# Start development server with hot reload
npm run dev

# Type checking
npm run type-check

# Run tests in watch mode
npm run test

# Run tests with UI
npm run test:ui

# Run tests once
npm run test:run

# Build for production
npm run build

# Preview production build locally
npm run preview

# Lint and type-check
npm run lint

# Format code with Prettier
npm run format

# Type checking only
npm run type-check

1. Install extensions:

   • Volar - Vue 3 support
   • ESLint - ESLint integration
   • Prettier - Code formatting

2. Configure settings (already included in .vscode/settings.json):

   • Format on save enabled
   • ESLint auto-fix on save
   • Prettier as default formatter

Set up automatic code quality checks:

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npm run lint && npm run format"

The application supports both light and dark themes with automatic persistence:

• Theme Toggle: Switch between light and dark modes
• Persistent Storage: Theme preference saved in localStorage
• Material Design: Consistent theming across all components
• Responsive: Theme toggle available in app bar

<script setup lang="ts">
  import { useThemeStore } from '@/stores/theme'

  const themeStore = useThemeStore()

  // Toggle theme
  themeStore.toggleTheme()

  // Set specific theme
  themeStore.setTheme(true) // dark mode
  themeStore.setTheme(false) // light mode
</script>

Light Theme:

• Primary: #1867C0 (Blue)
• Secondary: #5CBBF6 (Light Blue)
• Accent: #82B1FF (Light Blue)

Dark Theme:

• Primary: #2196F3 (Blue)
• Secondary: #424242 (Gray)
• Accent: #FF4081 (Pink)

The application uses a consistent money formatting system:

// composables/useMoneyFormat.ts
export const useMoneyFormat = () => {
  const fmt = new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
  })
  return (pence: number) => fmt.format(pence / 100)
}

Features:

• Internal storage in pence (integers)
• Display formatting in pounds with £ symbol
• Automatic conversion between display and storage formats
• Color coding: green for income, red for expenses

The application uses API key authentication:

1. Login Flow: Users enter API key on LoginPage
2. Storage: Key stored in sessionStorage and Pinia store
3. Interceptor: Axios automatically adds X-API-Key header
4. Session Management: Automatic redirect to login on 401 responses

Interactive charts powered by Apache ECharts:

• Pie Charts: Spending breakdown by tags
• Bar Charts: Monthly cash flow visualization
• Responsive: Charts adapt to container size
• Lazy Loading: Chart components loaded on demand

The project includes comprehensive unit tests:

# Run tests in watch mode
npm run test

# Run tests with UI
npm run test:ui

# Run tests once
npm run test:run

Test Coverage:

• Component rendering and interactions
• Store state management
• API integration
• Form validation
• Utility functions

# Create production build
npm run build

# Preview build locally
npm run preview

1. Static Hosting: Deploy dist/ folder to any static hosting service
2. Docker: Use the included Dockerfile for containerized deployment
3. Nginx/Caddy: Serve behind a reverse proxy for production

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and ensure tests pass
4. Run code quality checks: npm run lint && npm run format
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Open a Pull Request

• TypeScript: All code must be properly typed
• ESLint: No linting errors allowed
• Prettier: Consistent code formatting
• Tests: New features should include tests
• Vue 3: Use Composition API and <script setup>

This project is licensed under the MIT License - see the LICENSE file for details.

ESLint Not Working:

npx eslint --version
npx eslint --print-config src/App.vue

TypeScript Errors:

npm run type-check
vue-tsc --noEmit

Prettier Conflicts:

npx prettier --check src/
npx prettier --write src/components/MyComponent.vue

Build Issues:

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

For additional help, please check the Issues page or create a new issue.