Advanced Architecture & Developer Reference

1. Composables Reference

The project features several custom composables to handle complex logical flows:

  • useApi: The core for all authenticated backend communication.
  • useSocialMeta: Manages SEO and Open Graph tags dynamically. It automatically handles absolute URLs and HTTPS requirements for platforms like WhatsApp.
  • useTranslator: A lightweight wrapper for managing component-level translations fetched from the backend.
  • useFacebookAuth & useGoogleGsi: Handle social authentication flows and integration with Firebase.
  • useUTM: Automatically captures and stores UTM parameters from the URL for marketing attribution.
  • useYlMoment: A localized wrapper around Moment.js, ensuring dates and times are formatted according to the current locale and timezone.

2. Middleware Deep Dive

Middleware is used to enforce global rules and protect routes:

Global Middleware (Ordered)

  1. 01.ensure-ui-is-consistent-with-current-locale: Synchronizes the UI language if it changes in another browser tab.
  2. 02.check_login_status: Verifies authentication and ensures the Pinia store has the latest user profile.
  3. 03.ensure_that_basic_data_is_available: Triggers the getEssentials fetch to load site settings, supported languages, and translations.
  4. 04.ensure_that_current_path_has_a_locale_code: Enforces the :localeCode prefix on all routes.
  5. 05.set-selected-currency: Ensures a currency is selected and saved in cookies.
  6. 06.save_route_name_on_navigation: Tracks navigation history for “Go Back” functionality.

Role-Based Middleware

  • student.js: Restricts access to student-only pages.
  • tutor.js: Restricts access to tutor-only dashboard areas.
  • affiliate.js: Protects affiliate management routes.

3. Plugins & Third-Party Integrations

  • Firebase: Initialized as a client-side plugin for social authentication.
  • Sentry: Integrated for real-time error tracking with automated source map uploads during production builds.
  • Stripe: Payment processing is handled via @unlok-co/nuxt-stripe.
  • ApexCharts: Used for data visualization in the tutor and student dashboards.

4. Advanced Routing & SEO

The routing system is highly customized for internationalization:

  • Dynamic Locale Prefixing: All routes are automatically prefixed with /:localeCode via a Nuxt hook in nuxt.config.ts.
  • Sitemap Generation: A custom sitemap:generate logic in nuxt.config.ts fetches dynamic routes (like blog articles) from the backend and combines them with static pages.
  • IndexNow: The sitemap generation process automatically notifies api.indexnow.org about content updates to ensure search engines crawl the site promptly.

5. Layout & Store Architecture

Layouts

  • dashboard.vue: A comprehensive layout for the internal user area (Tutors/Students). It handles the side navigation, headers, and RTL/LTR logic.
  • default.vue: The basic fallback layout. (Optimized for public-facing landing pages.)

Main Store (stores/main.js)

The central state hub. It manages:

  • essentials: Site settings, languages, and metadata.
  • profileData: The authenticated user’s information.
  • lang: The current language code.
  • translations: Global translations map.

6. Styling & Asset Management

The styling system combines Vuetify’s utility-first approach with custom SCSS:

  • Core Entry: assets/styles/framework.scss imports all global styles and overrides.
  • Variables: assets/variables.scss defines project-specific colors, fonts, and spacing tokens used across both Vuetify and Ant Design.
  • Mixins: assets/styles/mixins.scss provides utilities for RTL support, flexbox patterns, and responsive media queries.
  • Images: Optimized via @nuxt/image. Use the assets/images directory and the <nuxt-img> component for automated resizing and WebP conversion.