# app.js

## Purpose
Main Vue application entry point that sets up the SPA (Single Page Application) architecture with global state management and component loading.

## Key Components
- `createApp()` - Vue app instance creation
- `Pinia` - State management (replaces Vuex)
- `useUserStore()` - User state management
- `useAuth()` - Authentication composable

## Exported Interfaces
- `$navigate` - Global navigation helper
- `$user` - User store access
- `$auth` - Auth composable access
- `$modal` - Modal dialog access

## Inputs
- Server-side page data via `dataset.page`
- Component imports from `resources/js/Pages/`

## Outputs
- Vue app mounted to `#app` element
- Global navigation via `$navigate` helper
- Async component loading based on current route

## Side Effects
- Initializes Pinia state management
- Fetches current user data on startup
- Registers global components (TopHeader, BottomNav)

## Dependencies
- `createApp`, `h`, `defineAsyncComponent` from Vue 3
- `Pinia` for state management
- Axios for API calls

## Notes
- Uses Pinia instead of Vuex for state management
- Async component loading improves performance
- Global `$navigate` helper available for programmatic navigation