Languages

Tools

• Nuxt I18n – Locale and translation management

Setup

English (en) is enabled by default. To add another language:

1. Register the new locale in shared/config.ts
   This tells the app that the language exists and can be used.
   shared/config.ts

   i18n: {
     defaultLocale: 'en',
     locales: [
       { code: 'en', language: 'en-US', file: 'en.json', name: 'English' },
       { code: 'es', language: 'es-ES', file: 'es.json', name: 'Spanish' }, // New
     ],
   }
   

2. Create the translation file for that locale Every key in this file should match the keys used in your app.
   locales/es.json

   {
       "pages.home.title": "Bienvenidos a ShipAhead",
       "common.siteTagline": "Tu Boilerplate SaaS",
       "common.siteDescription": "Una solución poderosa para tu proyecto."
   }
   

3. (Optional) Configure routing and language detection in nuxt.config.ts Do this if you want URL prefixes (for example /es/...) or automatic language switching based on the user’s browser.

   i18n: {
     strategy: 'prefix_except_default', // /es/about but / for default locale
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'shipahead_language',
       fallbackLocale: 'en'
     },
     langDir: 'locales'
   }
   

Usage

• Translate text
  Use useI18n() and reference your translation keys.

  const { t } = useI18n(); console.log(t('pages.home.title')); // "Welcome to ShipAhead" (en) // "Bienvenidos a ShipAhead" (es)
  

• Switch languages
  Use the built-in LocaleToggler component so users can change language from the UI.
  index.vue

  <template>
      <LocaleToggler />
  </template>
  

  
  When a language is selected, the site updates immediately.
• Default behavior
  English is pre-configured. To support another language, add it in shared/config.ts and create a matching JSON file in locales/.
• Browser detection
  • If enabled, the app tries to match the user’s browser language.
  • If no match exists, it falls back to the default locale.
• Tip
  Keep translation keys consistent (for example buttons.save, errors.required) so they are easier to maintain across languages.