Multi domain locales, one domain per language not working?

[Zyles]

Environment

Nuxt project info:

------------------------------
- Operating System: Windows_NT
- Node Version:     v22.11.0
- Nuxt Version:     3.15.1
- CLI Version:      3.19.1
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      srcDir, compatibilityDate, devtools, modules, typescript, css, app, i18n, routeRules, site
- Runtime Modules:  @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
- Build Modules:    -
------------------------------

Reproduction

Following guide: https://i18n.nuxtjs.org/docs/guide/multi-domain-locales

import { localeDomains } from "./locale-domains.config";

const i18nDomains = [
  "mydomain.com",
  "mydomain.se",
  localeDomains.en,
  localeDomains.se,
] as any;

export default defineNuxtConfig({
  modules: ["@nuxtjs/tailwindcss", "@nuxtjs/sitemap", "@nuxtjs/i18n"],
  typescript: {
    strict: true,
    typeCheck: true,
  },
  i18n: {
    vueI18n: "./i18n.config.ts",
    multiDomainLocales: true,
    strategy: "no_prefix", // No prefix like "en" or "se" in routes
    detectBrowserLanguage: false,
    defaultLocale: "en",
    langDir: "locales",
    locales: [
      {
        code: "en",
        iso: "en-US",
        domains: i18nDomains,
        name: "English",
        defaultForDomains: ["mydomain.com"],
        file: "en.yaml",
      },
      {
        code: "se",
        iso: "se-SE",
        domains: i18nDomains,
        name: "Svenska",
        defaultForDomains: ["mydomain.se"],
        file: "se.yaml",
      },
    ],
  },
  routeRules: {
    "/*": { ssr: true },
  },
});

export const localeDomains = {
  en: process.env.DOMAIN_EN,
  se: process.env.DOMAIN_SE,
};

Will error in IDE for the "domains" key:

Type '(string | undefined)[]' is not assignable to type 'string[]'.
  Type 'string | undefined' is not assignable to type 'string'.
    Type 'undefined' is not assignable to type 'string'.ts(2322)
module.d.ts(283, 5): The expected type comes from property 'domains' which is declared here on type 'LocaleObject<string>'

If we try set it to "any":

const i18nDomains = [
  "mydomain.com",
  "mydomain.se",
  localeDomains.en,
  localeDomains.se,
] as any; // or as string[]

Let's try with:

defaultForDomains: ["mydomain.com", localeDomains.en],

// Error: 
Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2322)
(alias) const localeDomains: {
    en: string | undefined;
    se: string;
}
import localeDomains

Need to use:

en: process.env.DOMAIN_EN as string,

But this wont make a difference it seems.

Then try to run it:

$env:DOMAIN_SE="mydomain.se"; npm run dev

// This isn't correct either
$env:DOMAIN_SE="se"; npm run dev

// Nor is this
$env:DOMAIN_SE; npm run dev

mydomain.com should load locale EN
mydomain.se should load locale SE
+
work in dev with ENV variables and support "npm run generate" with correct locale.

No translation is happening.

What is the correct way to define the ENV variable?

Describe the bug

Type errors trying to assign an array to domains key.

And no translation is happening trying to use ENV variables.

Additional context

No response

Logs

[vanling]

Im trying the same here.. Im looking into https://i18n.nuxtjs.org/docs/api/runtime-config#locales which seems to be the way to go, but cant get it to work..

Nuxt itself accepts (via defu) the weird .env notation (https://github.com/nuxt/nuxt/discussions/24470#discussioncomment-8566795)

NUXT_PUBLIC_TEST=["test","test2","test3"]

That works...

Trying the same here

NUXT_PUBLIC_I18N_DOMAIN_LOCALES_NL_DEFAULT_FOR_DOMAINS=["nl.domain.ext"]
NUXT_PUBLIC_I18N_DOMAIN_LOCALES_NL_DOMAINS=["nl.domain.ext","en.domain.ext"]

But whatever I try, this is not working.

My guess is, this whole key NUXT_PUBLIC_I18N_DOMAIN_LOCALES_NL_DOMAINS is not working or it uses a custom code without defu as used in nuxt.

[ulfgebhardt]

I cannot get multiDomainLocales nor differentDomains to work in "@nuxtjs/i18n": "^9.5.6".

It seems like the feature is broken. Am I worng?

[HADB]

In my case, the locale displays right but the redirection is not work if differentDomains sets true.

[ulfgebhardt]

I got it running.

nuxt.config.js

const DOMAIN_EN = process.env.DOMAIN_EN ?? 'http://localhost:3000'
const DOMAIN_DE = process.env.DOMAIN_DE ?? 'http://localhost:3000'

export default defineNuxtConfig({
  [...]
  i18n: {
    defaultLocale: 'en',
    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      { code: 'en', name: 'English', file: 'en.json', domain: DOMAIN_EN },
      { code: 'de', name: 'Deutsch', file: 'de.json', domain: DOMAIN_DE }
    ],
    detectBrowserLanguage: false,
    strategy: 'no_prefix',
    [...]
  },
})

Header.vue

<template>
  [...]
            <a v-for="av in availableLocales" :key="av.code" @click.prevent="handleLanguageSwitch(av.code)">
              <div class="inline-flex items-center">
                <svg v-if="av.code === 'en'" [...] /></svg>
                <svg v-if="av.code === 'de'" [...] /></svg>
                {{ av.name }}
              </div>
              
            </a>
  [...]
</template>

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

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

const handleLanguageSwitch = (targetLocale: string) => {
  // In development mode: just switch locale without domain change
  if (process.env.NODE_ENV !== 'production') {
    setLocale(targetLocale)
    return
  }
  
  // In production mode: switch domain
  const targetUrl = switchLocalePath(targetLocale)
  if (targetUrl) {
    window.location.href = targetUrl
  }
}
</script>

Full Repo: https://github.com/webcraftmedia/ocelot-hosting/tree/master/frontend