I have the following files:
// nuxt.config.js
import { locales } from './services/i18n'
...
i18n: {
lazy: true,
langDir: '~/locales/',
defaultLocale: 'en',
detectBrowserLanguage: false,
differentDomains: true,
locales,
vueI18n: {
fallbackLocale: 'en'
}
},
publicRuntimeConfig: {
...
subDomain: process.env.SUB_DOMAIN,
},
...
// services/i18n/index.js
export const locales = [
{
code: 'ar',
iso: 'ar',
file: 'ar.json',
dir: 'rtl',
domain: `${process.env.SUB_DOMAIN}.example.ae`,
name: 'العَرَبِيَّة',
enName: 'Arabic',
defaultLanguage: true,
languages: ['ar']
},
{
code: 'bg',
iso: 'bg',
file: 'bg.json',
dir: 'ltr',
domain: `${process.env.SUB_DOMAIN}.example.bg`,
name: 'Български',
enName: 'Bulgarian',
defaultLanguage: true,
languages: ['bg']
},
...
]
The problem is that process.env.SUB_DOMAIN
seems to be undefined in /services/i18n/index.js
, although it is set because the same variable is not undefined in nuxt.config.js
. I know that nuxt is exposing the values of publicRuntimeConfig
as $config
, however, $config
is not accessible in /services/i18n/index.js
. It might work if I would move locales
to nuxt.config.js
, but I don't want to do that because it would worsen the readability of the config file.
So my question is what the best approach would be to get subdomain inside /services/i18n/index.js
.
EDIT: A great answer was given on Nuxtjs' discussions by Alexander Lichter: https://github.com/nuxt/nuxt.js/discussions/9289#discussioncomment-729801
// nuxt.config.js
import { locales } from './services/i18n'
...
i18n: {
lazy: true,
langDir: '~/locales/',
defaultLocale: 'en',
detectBrowserLanguage: false,
differentDomains: true,
locales: locales(process.env.SUB_DOMAIN),
vueI18n: {
fallbackLocale: 'en'
}
},
publicRuntimeConfig: {
...
subDomain: process.env.SUB_DOMAIN,
},
...
// services/i18n/index.js
export const locales = domain => [
{
code: 'ar',
iso: 'ar',
file: 'ar.json',
dir: 'rtl',
domain: `${domain}.example.ae`,
name: 'العَرَبِيَّة',
enName: 'Arabic',
defaultLanguage: true,
languages: ['ar']
},
{
code: 'bg',
iso: 'bg',
file: 'bg.json',
dir: 'ltr',
domain: `${domain}.example.bg`,
name: 'Български',
enName: 'Bulgarian',
defaultLanguage: true,
languages: ['bg']
},
...
]