NuxtN
Nuxt•3mo ago•
9 replies
Mustlane

[kapa.ai] i18n/nuxtjs. Issues with differentDomains

./nuxt.config.ts:
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', name: 'English', file: 'en.json', domain: localeDomains.en},
      { code: 'ee', name: 'Eesti', file: 'ee.json', domain: localeDomains.ee},
      { code: 'fi', name: 'Suomi', file: 'fi.json', domain: localeDomains.fi},
      { code: 'lt', name: 'Lietuvių', file: 'lt.json', domain: localeDomains.lt},
      { code: 'lv', name: 'Latvijas', file: 'lv.json', domain: localeDomains.lv}
    ],
    differentDomains: true,
    detectBrowserLanguage: false
   },


./locale-domains.config.ts:
export const localeDomains = {
  en: process.env.DOMAIN_EN,
  ee: process.env.DOMAIN_EE,
  fi: process.env.DOMAIN_FI,
  lv: process.env.DOMAIN_LV,
  lt: process.env.DOMAIN_LT
}


./app/pages/test.vue:
<script setup lang="ts">
    const { locale, locales } = useI18n()
    const switchLocalePath = useSwitchLocalePath()

    const availableLocales = computed(() => {
  return locales.value.filter(i => i.code !== locale.value)
})
</script>

<template>
    <div class="flex flex-col gap-1">
      <a v-for="locale in availableLocales" :href="switchLocalePath(locale.code)" :key="locale.domain">
            {{ locale.code }}
      </a>
    </div>
    <h1 class="bg-red-7100">{{ $t('welcome') }}</h1>
</template>


The problem, is that currently the 
href:switchLocalePath(locale.code)
creates a path that has locale code in both subdomain and url path (i.e. http://lv.localhost:3000/lv/test).
If I delete the locale code from url pth using 
strategy: "no_prefix"
, then 
$t('welcome')
starts to display only default language no matter what subdomain I'm on.


How to fix?
Was this page helpful?