Internationalization (i18n) in NuxSaaS

This document explains how NuxSaaS implements multi-language support and the rationale behind its design.

How NuxSaaS Sets Up Multi-Language Support

NuxSaaS uses the @nuxtjs/i18n module to provide internationalization for the application. The configuration is primarily managed in the nuxt.config.ts and app/i18n/i18n.config.ts files.

Key Configuration Points

• Locales Definition:
  The supported languages are defined in the locales array in nuxt.config.ts. Each locale includes a code, ISO identifier, and display name. For example:

  const locales = [
    { code: 'en', iso: 'en-US', name: 'English' },
    { code: 'zh-CN', iso: 'zh-CN', name: '简体中文' },
    { code: 'ja', iso: 'ja-JP', name: '日本語' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]

• Default and Fallback Locale: English (en) is set as the default locale. Fallback and missing translation warnings are disabled for a cleaner user experience.

• Message Organization: All global translation messages are organized in the app/i18n/ directory. The main configuration file i18n.config.ts merges global translations and validation messages (e.g., Zod validation errors) for each language:

  const messages = {
    'en': { ...zodEn, ...global.en },
    'zh-CN': { ...zodZhCN, ...global['zh-CN'] },
    'ja': { ...zodJa, ...global.ja },
    'fr': { ...zodFr, ...global.fr }
  }

• Per-Page and Per-Component Translations: For complex pages or components, translations can be scoped using <i18n src="./i18n.json"></i18n> blocks, allowing for modular and maintainable translation files.

• Locale-Aware Routing: The application uses locale-aware routing, so URLs reflect the selected language (e.g., /ja/ , /zh-CN/ ). The useLocalePath() composable is used to generate correct links.

• Adding a New Language:

  To add a new language:

  1. Add the locale to the locales array in nuxt.config.ts .
  2. Create/Uodate translation files in app/i18n/ for the new language.
  3. Update all i18n.json files to include the new language's messages.

  Search: "en": { in VS Code:

Why This Approach?

• Scalability : By organizing translations per language and per feature, the project can easily scale to support more languages and contributors.
• Maintainability : Centralized configuration and modular translation files make it easy to update or add translations without affecting unrelated parts of the app.
• User Experience : Locale-aware routing and seamless language switching provide a consistent and intuitive experience for users worldwide.
• Validation Consistency : Integrating validation messages (e.g., from Zod) ensures that all user-facing feedback is localized, improving accessibility and professionalism.
• Performance : Only the necessary translation files are loaded, keeping the application efficient.