General Architecture

1. Routing & Internationalization

The project uses a custom localized routing system. Every route (except errors) is prefixed with a 2-character locale code (e.g., /en/, /ar/).

  • Middleware: middleware/04.ensure_that_current_path_has_a_locale_code.global.js ensures every path has a locale. If missing, it redirects based on saved cookies or the user’s IP-based location.
  • App.vue: Wraps the application in a-config-provider (Ant Design) and v-locale-provider (Vuetify) to sync RTL/LTR and translations across both libraries.

2. State Management (Pinia)

The useMainStore in stores/main.js is the central hub for:

  • Essentials: Site-wide settings, supported languages, and page metadata are fetched once and cached in localStorage.
  • Profile Data: User profile information is fetched after authentication.
  • Locales: Manual management of the current language state.

3. Authentication Flow

Authentication is handled via nuxt-auth-sanctum.

  • Session-based: Uses Laravel’s built-in session management via cookies.
  • Middleware Check: middleware/02.check_login_status.global.js verifies if the user is authenticated and ensures profileData is populated in the store.

4. API Integration

  • useApi Composable: A wrapper around Nuxt’s useFetch or $fetch tailored for the Laravel backend.
  • Exception Handling: catchException in misc/ready_functions.js provides consistent error notifications and handling.