title | description |
---|---|
Different domains |
You might want to use a different domain name for each language your app supports. To achieve this: |
You might want to use a different domain name for each language your app supports. To achieve this:
- Set
differentDomains
option totrue
- Configure the
locales
option as an array of objects, where each object has adomain
key whose value is the domain name 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
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.
export default defineNuxtConfig({
// ...
i18n: {
locales: [
{
code: 'en',
domain: 'mydomain.com'
},
{
code: 'es',
domain: 'es.mydomain.com'
},
{
code: 'fr',
domain: 'fr.mydomain.com'
},
{
code: 'ru',
domain: 'http://ru.mydomain.com'
},
{
code: 'ua',
domain: 'https://ua.mydomain.com'
}
],
differentDomains: true
// Or enable the option in production only
// differentDomains: (process.env.NODE_ENV === 'production')
},
// ...
})
When using different domain names, your lang switcher should use regular <a>
tags:
<script setup>
const { locale, locales } = useI18n()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => {
return (locales.value).filter(i => i.code !== locale.value)
})
</script>
<template>
...
<a v-for="locale in availableLocales" :href="switchLocalePath(locale.code)" :key="locale.code">
{{ locale.code }}
</a>
...
</template>
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'
export default defineNuxtConfig({
// ...
modules: ['@nuxtjs/i18n'],
// ...
i18n: {
// ...
differentDomains: process.env.NODE_ENV === 'production',
locales: [
{
code: 'uk',
domain: localeDomains.uk,
},
{
code: 'fr',
domain: localeDomains.fr,
}
],
// ...
}
// ...
})