Localization Strategy

Localization is deep-integrated and driven by the backend CMS. The project follows a strict pattern for managing localized strings within components.

The Component Pattern

Each component or module defines its required localized strings in a state variable (typically an array of strings called langPayload). These strings are unique keys that represent the content.

const langPayload = [
    'Hiw.tutor',
    'Hiw.learner',
    'More on how it works for tutors',
    'More on how it works for students',
    'Something doesnt feel quite right. Please try refreshing the page or come back later.'
]

To fetch the actual content, we use the getTranslations utility:

  1. Request: Pass langPayload to getTranslations.
  2. Response: Returns an object of key-value pairs where the key is the string from the payload and the value is the localized text for the currently selected language.
  3. Source of Truth: All unique keys must be mapped in the Backend CMS for every supported language in the app.

[!IMPORTANT] When creating a new module or component, you must follow this pattern. Hardcoding UI strings is strictly prohibited to maintain the Backend-First-Class architecture.

Global Localization

  • Translations Endpoint: The backend provides /api/translate to handle the key-value mapping.
  • Essentials Fetch: Global site strings (like navigation menu items) are retrieved during the initial essentials fetch.
  • Library Sync: The active locale is synchronized across Nuxt, Vuetify, and Ant Design Vue via app.vue, ensuring consistent RTL/LTR and internationalized UI components.