Nuxt•8mo ago

i18n runtimeConfig different domains not working

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",
  },
});

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

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 !

14 Replies

OleP•6mo ago

There seems to be a bug in the module regarding this. I'm facing the same issue 😦 @melanie Did you find any solution?

xibman•6mo ago

@melanie check this part of the doc

xibman•6mo ago

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

@nuxtjs/i18n

Different Domains

Use a different domain name for each language your app supports.

OleP•6mo ago

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

OleP•6mo ago

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

GitHub

Support different domains config at runtime · Issue #2602 · nuxt-mo...

Environment Operating System: Linux Node Version: v18.14.2 Nuxt Version: 3.8.2 CLI Version: 3.10.0 Nitro Version: 2.8.1 Package Manager: [email protected] Builder: - User Config: devtools, modules, pages, ...

OleP•6mo ago

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.

Inès•6mo ago

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}`
            }
        ]
    },

// .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
    }
}))

// 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

OleP•6mo ago

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.

melanieOP•6mo ago

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

xibman•6mo ago

do you try something like this NUXT_PUBLIC_I18N_LOCALES_UK_DOMAIN=test command to start server

OleP•6mo ago

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

OleP•6mo ago

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.

GitHub

i18n/src/runtime/internal.ts at 0ef6d8b31a5e052a3326de3054e017d175a...

I18n module for Nuxt. Contribute to nuxt-modules/i18n development by creating an account on GitHub.

melanieOP•6mo ago

yes i've tried and it's not working

Baylife•5mo ago

Bump for notification when an issue is here @Baylife asda How can this still be with 0 response / feedback for a solution?

Gaming

Programming

i18n runtimeConfig different domains not working