[kapa.ai] i18n/nuxtjs. Issues with differentDomains

[atomic cargo]

./nuxt.config.ts:

  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', name: 'English', file: 'en.json', domain: localeDomains.en},
      { code: 'ee', name: 'Eesti', file: 'ee.json', domain: localeDomains.ee},
      { code: 'fi', name: 'Suomi', file: 'fi.json', domain: localeDomains.fi},
      { code: 'lt', name: 'Lietuvių', file: 'lt.json', domain: localeDomains.lt},
      { code: 'lv', name: 'Latvijas', file: 'lv.json', domain: localeDomains.lv}
    ],
    differentDomains: true,
    detectBrowserLanguage: false
   },

./locale-domains.config.ts:

export const localeDomains = {
  en: process.env.DOMAIN_EN,
  ee: process.env.DOMAIN_EE,
  fi: process.env.DOMAIN_FI,
  lv: process.env.DOMAIN_LV,
  lt: process.env.DOMAIN_LT
}

./app/pages/test.vue:

<script setup lang="ts">
    const { locale, locales } = useI18n()
    const switchLocalePath = useSwitchLocalePath()

    const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
})
</script>

<template>
    <div class="flex flex-col gap-1">
      <a v-for="locale in availableLocales" :href="switchLocalePath(locale.code)" :key="locale.domain">
            {{ locale.code }}
      </a>
    </div>
    <h1 class="bg-red-7100">{{ $t('welcome') }}</h1>
</template>

The problem, is that currently the href:switchLocalePath(locale.code) creates a path that has locale code in both subdomain and url path (i.e. http://lv.localhost:3000/lv/test).
If I delete the locale code from url pth using strategy: "no_prefix", then $t('welcome') starts to display only default language no matter what subdomain I'm on.

How to fix?

[cold girder]

Hi @atomic cargo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your issue with differentDomains and the locale code appearing both in the subdomain and the URL path (e.g., http://lv.localhost:3000/lv/test) is a common configuration pitfall with @nuxtjs/i18n. Here’s what’s happening and how to address it:

Problem Analysis

• When you use differentDomains: true, @nuxtjs/i18n expects to handle locale switching via domains (subdomains or separate domains), not via URL prefixes.
• If you keep the default strategy (like prefix_except_default or prefix_and_default), the locale code will appear in the path as well as the domain, resulting in URLs like http://lv.localhost:3000/lv/test.
• If you switch to strategy: 'no_prefix', the locale code is removed from the path, but you’re seeing that $t('welcome') only shows the default language, regardless of the subdomain.

Solution

1. Configuration Placement

• The locales, defaultLocale, differentDomains, and strategy options should be set in nuxt.config.ts, not in i18n.config.ts. This is confirmed by the troubleshooting in the knowledge sources, where misplacement of config options led to unexpected behavior Nuxt 3 i18n browser detection not working Part 6.

2. Correct Strategy

• When using differentDomains: true, you must use strategy: 'no_prefix'. This ensures that the locale is determined by the domain/subdomain, not by the URL path.

3. Domain Mapping

• Make sure that the domain values in your locales array are correctly set and that your development environment supports these subdomains (e.g., lv.localhost, en.localhost, etc.).

4. Locale Detection

• With differentDomains: true and strategy: 'no_prefix', @nuxtjs/i18n should detect the locale from the domain and set the correct language context, so $t('welcome') should work as expected.

5. Example Configuration

// nuxt.config.ts
import { localeDomains } from './locale-domains.config'

export default defineNuxtConfig({
  i18n: {
    defaultLocale: 'en',
    strategy: 'no_prefix',
    differentDomains: true,
    detectBrowserLanguage: false,
    locales: [
      { code: 'en', name: 'English', file: 'en.json', domain: localeDomains.en },
      { code: 'ee', name: 'Eesti', file: 'ee.json', domain: localeDomains.ee },
      { code: 'fi', name: 'Suomi', file: 'fi.json', domain: localeDomains.fi },
      { code: 'lt', name: 'Lietuvių', file: 'lt.json', domain: localeDomains.lt },
      { code: 'lv', name: 'Latvijas', file: 'lv.json', domain: localeDomains.lv }
    ]
  }
})

6. Troubleshooting

• If $t('welcome') still only shows the default language, double-check that your subdomains are correctly mapped to the expected locale in your hosts file or DNS, and that your browser is actually loading the site from the correct subdomain.
• Also, ensure that your translation files (e.g., lv.json, en.json) are correctly loaded and available.

Reference

This approach is supported by the troubleshooting and configuration advice found in Nuxt 3 i18n browser detection not working Part 6, which clarifies the importance of placing the correct options in nuxt.config.ts and using the right strategy for your domain setup.

---

Summary:
Use strategy: 'no_prefix' with differentDomains: true, and ensure all i18n options are in nuxt.config.ts. This will remove the locale code from the path and rely on the domain/subdomain for locale detection, making $t('welcome') work as expected for each domain. If issues persist, check your subdomain setup and translation file loading.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@atomic cargo Kapa.ai is still learning and improving, please let me know how I did by reacting below.

[atomic cargo]

@cold girder
"Make sure that the domain values in your locales array are correctly set and that your development environment supports these subdomains (e.g., lv.localhost, en.localhost, etc.)."

What do you mean by "supports these subdomains"?

[cold girder]

Let me check the knowledge base for you again. One moment! :books:

---

When I say "supports these subdomains," I mean that your local development environment must be configured so that addresses like lv.localhost, en.localhost, etc., actually resolve to your Nuxt app. This typically involves editing your system's hosts file to map each subdomain to 127.0.0.1 (localhost).

For example, you would add lines like:

127.0.0.1 en.localhost
127.0.0.1 lv.localhost
127.0.0.1 fi.localhost
127.0.0.1 lt.localhost
127.0.0.1 ee.localhost

This setup ensures that when you visit http://lv.localhost:3000 in your browser, it points to your local Nuxt development server, allowing the i18n module to detect the locale based on the subdomain.

The knowledge sources do not explicitly describe this hosts file setup, but they do mention that the domain values in your locales array must be correctly set and that your environment should route those domains to your Nuxt app for proper locale detection with differentDomains: true Nuxt 3 i18n browser detection not working Part 6.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@atomic cargo Kapa.ai is still learning and improving, please let me know how I did by reacting below.