i18n runtimeConfig different domains not working

[scenic osprey]

Hi all,
in my Nuxt3 application, i have a lot of environment variables in my .env file and declare in my runtimeConfig. But when i use NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN to declare different domains in nuxt/i18n, it doesn't work. Here is my nuxt.config.ts:

export default defineNuxtConfig({
  devtools: { enabled: true },
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE, // can be overridden by NUXT_PUBLIC_API_BASE environment variable
    },
    i18n: {
      locales: {
        uk: process.env.NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN,
        fr: process.env.NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN,
      },
    },
  },
  modules: ["@nuxtjs/i18n"],
  i18n: {
    locales: [
      {
        code: "uk",
        domain: process.env.NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN,
        file: "en.ts",
      },
      {
        code: "fr",
        domain: process.env.NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN,
        file: "fr.ts",
      },
    ],
    differentDomains: true,
    langDir: "lang",
  },
});

Here is my .env file:

NUXT_PUBLIC_API_BASE="API prod"
NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=http://mydomain.uk
NUXT_PUBLIC_I18N_LOCALES_FR_DOMAIN=http://mydomain.fr

And i launch my app through npm script "set -a && source ./.env && set +a && node .output/server/index.mjs" (not sure the best way)
I have an apache to serve mydomain.uk and mydomain.fr (proxy to localhost:3000)

Do you have an idea why it's not working ? Thanks !

i18n runtimeConfig different domains not working

[rose dragon]

There seems to be a bug in the module regarding this. I'm facing the same issue 😦

[rose dragon]

@scenic osprey Did you find any solution?

[rigid kiln]

@scenic osprey check this part of the doc

https://i18n.nuxtjs.org/docs/guide/different-domains#runtime-environment-variables

[rose dragon]

@rigid kiln The issue is that it does not work. The locale domain is not overriden with the runtime config value.

https://github.com/nuxt-modules/i18n/issues/2602

If anyone can get it to work, I would like to see the nuxt.config.

May be the documentation that is missing some key detail.

[velvet goblet]

Hello, this is what worked for me:

// .env
NUXT_PUBLIC_MY_DOMAIN=localhost:3002

// nuxt.config.ts
   i18n: {
        strategy: 'no_prefix',
        differentDomains: true,
        detectBrowserLanguage: false,
        locales: [
            {
                code: 'de',
                iso: 'de-DE',
                domain: `de.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            },
            {
                code: 'en',
                iso: 'en-GB',
                domain: process.env.NUXT_PUBLIC_MY_DOMAIN
            },
            {
                code: 'es',
                iso: 'es-ES',
                domain: `es.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            },
            {
                code: 'fr',
                iso: 'fr-FR',
                domain: `fr.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            },
            {
                code: 'it',
                iso: 'it-IT',
                domain: `it.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            },
            {
                code: 'nl',
                iso: 'nl-NL',
                domain: `nl.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            },
            {
                code: 'pt',
                iso: 'pt-PT',
                domain: `pt.${process.env.NUXT_PUBLIC_MY_DOMAIN}`
            }
        ]
    },

(the rest continues in another message)

And finally:

// i18n.config.ts
import en from './locales/en.json'
import fr from './locales/fr.json'
import de from './locales/de.json'
import it from './locales/it.json'
import nl from './locales/nl.json'
import es from './locales/es.json'
import pt from './locales/pt.json'

export default defineI18nConfig(() => ({
    legacy: false,
    globalInjection: true,
    fallbackLocale: 'en',
    messages: {
        en,
        fr,
        it,
        de,
        nl,
        es,
        pt
    }
}))

Using the npm run dev command (bound to nuxt dev --port=3002 --host in my package.json)
I can run it locally and my server is served through it.localhost:3002, de.localhost:3002....

NB: It also worked when I declared several env variables with NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN and so on, but I didn't want too many env variables so I managed the locale subdomain directly in the nuxt.config.ts

Hope it helps

[rose dragon]

This will work at build time, but will not work at runtime. Many use the same build for staging and production ect., and want to set specific domains on each environment using environment variables.

According to the documentation, you should be able to overwrite the domain using the runtime config. But this does not seem to work.

[scenic osprey]

Hello. @rigid kiln i've followed the documentation you mentioned, and i agree with @rose dragon, this works at build time (npm run dev) but not at runtime

[rigid kiln]

do you try something like this

NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=test command to start server

[rose dragon]

It works fine for baseUrl using NUXT_PUBLIC_I18N_BASE_URL. But it does not work for domains unfortunately.

[rose dragon]

The issue is not the environment variable, but rather that the values set in the runtime config is not respected. I found that the value is set in this line: https://github.com/nuxt-modules/i18n/blob/0ef6d8b31a5e052a3326de3054e017d175af8b90/src/runtime/internal.ts#L431, but I've not managed to debug the values there.

[scenic osprey]

yes i've tried and it's not working

[harsh ore]

Bump for notification when an issue is here

@harsh ore asda