different-domains.md

Different domains

You might want to use a different domain name for each language your app supports. To achieve this:

• Set differentDomains option to true
• Configure locales option as an array of object, where each object has a domain key which value is the domain name you'd like to use for the locale

// nuxt.config.js

['nuxt-i18n', {
  locales: [
    {
      code: 'en',
      domain: 'mydomain.com'
    },
    {
      code: 'es',
      domain: 'es.mydomain.com'
    },
    {
      code: 'fr',
      domain: 'fr.mydomain.com'
    }
  ],
  differentDomains: true
  // Or enable the option in production only
  // differentDomains: (process.env.NODE_ENV === 'production')
}]

When using different domain names, your lang swicher should use regular <a> tags:

<a
  v-for="locale in $i18n.locales"
  :href="switchLocalePath(locale.code)"
  :key="locale.code">
  {{ locale.code }}
</a>

Runtime environment variables

Sometimes there's a need to change domains in different environments, e.g. staging and production. As nuxt.config.js is used at build time it would be necessary to create different builds for different environments.

The alternative way is to keep the domains in Vuex store under localeDomains property. It can be accessed by the plugin during the initialisation, saving the trouble building multiple images.

// config/locale-domains.js
module.exports = {
  uk: process.env.DOMAIN_UK,
  fr: process.env.DOMAIN_FR,
};

// nuxt.config.js
const localeDomains = require('./config/locale-domains')
//...
[
  'nuxt-i18n',
  {
    differentDomains: process.env.NODE_ENV === 'production',
    locales: [
      {
        code: 'uk',
        domain: localeDomains.uk, // optional
      },
      {
        code: 'fr',
        domain: localeDomains.fr, // optional
      },
    ],
  },
]

// store/index.js
const localeDomains = require('~~/config/locale-domains');

export const state = () => ({
  localeDomains,
});