40 lines
1.2 KiB
Markdown
40 lines
1.2 KiB
Markdown
# 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 |