BarangaySystem/ai-docs/files/app.md

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