Appearance

Plugins Documentation ​

File Information ​

  • Path: app/plugins/
  • Purpose: Nuxt plugins for application initialization

Overview ​

Plugins are Nuxt plugins that run during application initialization. They are located in app/plugins/ and are loaded in a specific order.

Plugin Load Order ​

Plugins are loaded in this order (critical for proper initialization — do not change):

  1. pinia.ts - Pinia store setup (must load first)
  2. api-client.ts - API client setup (must be before auth-init for $api availability)
  3. vue-query.ts - TanStack Vue Query (requires Pinia and $api for error handling)
  4. 01.auth-init.ts - Auth initialization (requires Pinia and $api)
  5. vuetify.ts - Vuetify UI library
  6. pdfjs.client.ts - PDF.js for PDF preview
  7. laravel-echo.client.ts - Laravel Echo WebSocket client
  8. stream-saver.client.ts - StreamSaver for file downloads
  9. snackbar.client.ts - Snackbar notification system
  10. mitt.client.ts - Event bus
  11. vue-audio-visual.client.ts - Audio visual component
  12. branding-colors.client.ts - Brand-specific theming (client-only)

Client-Only Plugins ​

Plugins with .client.ts suffix run only in the browser, not during SSR:

  • pdfjs.client.ts
  • laravel-echo.client.ts
  • stream-saver.client.ts
  • snackbar.client.ts
  • mitt.client.ts
  • vue-audio-visual.client.ts
  • branding-colors.client.ts

Plugin Documentation ​

Core Plugins ​

  1. Pinia Plugin - State management setup with SSR hydration
  2. API Client Plugin - API client with authentication and error handling
  3. Vue Query Plugin - TanStack Vue Query: caching, deduplication, global error handling, SSR
  4. Auth Init Plugin - Authentication state initialization from cookies

UI Plugins ​

  1. Vuetify Plugin - Material Design UI component library
  2. Snackbar Plugin - Global notification system

Communication Plugins ​

  1. Laravel Echo Plugin - WebSocket communication with Pusher
  2. Mitt Plugin - Global event bus for component communication

Utility Plugins ​

  1. Stream Saver Plugin - Large file download handling
  2. Vue Audio Visual Plugin - Audio player with waveform visualization

Other ​

Plugin Details ​

Pinia (pinia.ts) ​

File Path: app/plugins/pinia.ts

Sets up Pinia state management with SSR hydration.

Features:

  • Pinia store initialization
  • SSR state serialization
  • Client-side state hydration
  • Prevents hydration mismatches

Documentation: Pinia Plugin

API Client (api-client.ts) ​

File Path: app/plugins/api-client.ts

Configures the API client with authentication and error handling.

Features:

  • Automatic token injection
  • Base URL configuration
  • Error handling (401 auto-logout)
  • Account status monitoring
  • Request cancellation

Documentation: API Client Plugin

Auth Init (01.auth-init.ts) ​

File Path: app/plugins/01.auth-init.ts

Initializes authentication state from HTTP-only cookies.

Features:

  • Cookie-based authentication
  • Store initialization
  • Accessible instances loading
  • SSR compatibility

Documentation: Auth Init Plugin

Vue Query (vue-query.ts) ​

File Path: app/plugins/vue-query.ts

Configures TanStack Vue Query for server state, caching, and mutations.

Features:

  • QueryClient with configurable staleTime (default 5 min, via NUXT_PUBLIC_QUERY_STALE_TIME)
  • Request deduplication and background refetch
  • Global query/mutation error handling (401 → logout, others → snackbar)
  • SSR support with hydrate/dehydrate

Documentation: Vue Query Plugin

Vuetify (vuetify.ts) ​

File Path: app/plugins/vuetify.ts

Configures Vuetify UI component library.

Features:

  • All Vuetify components
  • Material Design Icons
  • SSR-safe configuration
  • Theme configuration

Documentation: Vuetify Plugin

Laravel Echo (laravel-echo.client.ts) ​

File Path: app/plugins/laravel-echo.client.ts

Configures Laravel Echo for WebSocket communication.

Features:

  • Pusher integration
  • Secure server-side authentication
  • Private/presence channels
  • Real-time event broadcasting

Documentation: Laravel Echo Plugin

Stream Saver (stream-saver.client.ts) ​

File Path: app/plugins/stream-saver.client.ts

Configures StreamSaver for large file downloads.

Features:

  • Stream-based downloads
  • Large file support
  • Memory-efficient
  • Progress tracking

Documentation: Stream Saver Plugin

Snackbar (snackbar.client.ts) ​

File Path: app/plugins/snackbar.client.ts

Initializes global snackbar notification system.

Features:

  • Success/error/warning/info notifications
  • Custom icons and colors
  • Auto-dismiss functionality
  • Smooth animations

Documentation: Snackbar Plugin

Mitt (mitt.client.ts) ​

File Path: app/plugins/mitt.client.ts

Sets up event bus for component communication.

Features:

  • Global event bus
  • Event emission and listening
  • Type-safe events
  • Decoupled communication

Documentation: Mitt Plugin

Vue Audio Visual (vue-audio-visual.client.ts) ​

File Path: app/plugins/vue-audio-visual.client.ts

Configures audio visual component for audio playback.

Features:

  • Audio player component
  • Visual waveform display
  • Audio controls
  • Progress tracking

Documentation: Vue Audio Visual Plugin