Multi domain locales
How to set up multi domain locales:
- Set the
multiDomainLocales
option totrue
- Configure the
locales
option as an array of objects:- Each object has a
domains
key whose value is a array of the domains you'd like to use for that locale. Optionally include a port (if non-standard) and/or a protocol. If the protocol is not provided then an attempt will be made to auto-detect it but that might not work correctly in some cases like when the pages are statically generated. - Optionally set for each object a
defaultForDomains
key whose value is a array of the default domains you'd like to use for that locale. Optionally include a port (if non-standard) and/or a protocol. If the protocol is not provided then an attempt will be made to auto-detect it but that might not work correctly in some cases like when the pages are statically generated.
- Each object has a
- Optionally set
detectBrowserLanguage
tofalse
. When enabled (which it is by default), user can get redirected to a different domain on first visit. Set tofalse
if you want to ensure that visiting given domain always shows page in the corresponding locale.
const i18nDomains = ['mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']
export default defineNuxtConfig({
i18n: {
locales: [
{
code: 'en',
domains: i18nDomains,
defaultForDomains: ['mydomain.com']
},
{
code: 'es',
domains: i18nDomains,
defaultForDomains: ['es.mydomain.com']
},
{
code: 'fr',
domains: i18nDomains,
defaultForDomains: ['fr.mydomain.com']
},
{
code: 'pl',
domains: i18nDomains,
defaultForDomains: ['http://pl.mydomain.com']
},
{
code: 'ua',
domains: i18nDomains,
defaultForDomains: ['https://ua.mydomain.com']
},
{
code: 'nl',
domains: i18nDomains
},
{
code: 'de',
domains: i18nDomains
},
],
multiDomainLocales: true
}
})
Runtime environment variables
Sometimes there's a need to change domains in different environments, e.g. staging and production.
As nuxt.config.ts
is used at build time it would be necessary to create different builds for different environments.
export const localeDomains = {
uk: process.env.DOMAIN_UK,
fr: process.env.DOMAIN_FR
}
import { localeDomains } from './locale-domains.config'
const i18nDomains = [localeDomains.uk, localeDomains.fr]
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
multiDomainLocales: true,
locales: [
{
code: 'uk',
domains: i18nDomains,
defaultForDomains: [localeDomains.uk]
},
{
code: 'fr',
domains: i18nDomains,
defaultForDomains: [localeDomains.fr]
}
]
}
})
With the above config, a build would have to be run for staging and production with different .env files that specify DOMAIN_UK
and DOMAIN_FR
.
Using different domains for only some of the languages
If one or more of the domains need to host multiple languages, the default language of each domain needs to have domainDefault: true
so there is a per domain fallback locale.
The option differentDomains
still need to be set to true
though.
const i18nDomains = ['mydomain.com', 'en.mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']
export default defineNuxtConfig({
// ...
i18n: {
locales: [
{
code: 'en',
domains: i18nDomains,
defaultForDomains: ['mydomain.com', 'en.mydomain.com']
},
{
code: 'es',
domains: i18nDomains,
defaultForDomains: ['es.mydomain.com']
},
{
code: 'fr',
domains: i18nDomains,
defaultForDomains: ['fr.mydomain.com']
},
{
code: 'pl',
domains: i18nDomains,
defaultForDomains: ['http://pl.mydomain.com']
},
{
code: 'ua',
domains: i18nDomains,
defaultForDomains: ['https://ua.mydomain.com']
},
{
code: 'nl',
domains: i18nDomains
},
{
code: 'de',
domains: i18nDomains
},
],
strategy: 'prefix',
multiDomainLocales: true
},
// ...
})
Given above configuration with the prefix
strategy, following requests will be:
- https://mydomain.com -> https://mydomain.com/en (en language)
- https://mydomain.com/pl -> https://mydomain.com/pl (pl language)
- https://mydomain.com/ua -> https://mydomain.com/ua (ua language)
- https://mydomain.com/nl -> https://mydomain.com/nl (nl language)
- https://en.mydomain.com -> https://en.mydomain.com/en (en language)
- https://es.mydomain.com -> https://es.mydomain.com/es (es language)
- https://fr.mydomain.com -> https://fr.mydomain.com/fr (fr language)
- https://fr.mydomain.com/de -> https://fr.mydomain.com/de (de language)
The same requests when using the prefix_except_default
strategy, will be:
- https://mydomain.com -> https://mydomain.com (en language)
- https://mydomain.com/pl -> https://mydomain.com/pl (pl language)
- https://mydomain.com/ua -> https://mydomain.com/ua (ua language)
- https://mydomain.com/nl -> https://mydomain.com/nl (nl language)
- https://en.mydomain.com -> https://en.mydomain.com (en language)
- https://es.mydomain.com -> https://es.mydomain.com (es language)
- https://fr.mydomain.com -> https://fr.mydomain.com (fr language)
- https://fr.mydomain.com/de -> https://fr.mydomain.com/de (de language)