Skip to content

i18n/nuxtjs with differentDomains = true; shows default locale no matter what subdomain I'm on. #3868

@Mustlane

Description

@Mustlane

Minimal reproducible example

nuxt.config.ts:

import { localeDomains } from './locale-domains.config'

  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', name: 'English', file: 'en.json', domain: localeDomains.en},
      { code: 'ee', name: 'Eesti', file: 'ee.json', domain: localeDomains.ee},
    ],
    defaultLocale: 'en',
    differentDomains: true,
    detectBrowserLanguage: false,
  },

locale-domains.config.ts:

export const localeDomains = {
  en: process.env.DOMAIN_EN,
  ee: process.env.DOMAIN_EE,
}

.env:

DOMAIN_EN=http://localhost:3000/
DOMAIN_EE=http://ee.localhost:3000/

index.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 style="display: flex; flex-direction: column; 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>

Example: currently the href:switchLocalePath(locale.code) located in ./app/pages/index.vue creates a path that has locale code in both subdomain and url path (i.e. http://ee.localhost:3000/ee/).

If I remove the locale code from url path using strategy: "no_prefix" , then $t('welcome') starts to display only the default language no matter what subdomain I'm on.

So:

without "no_prefix"
ee.localhost:3000/ee/ => Estonian
localhost:3000/ => English
localhost:3000/ee/ => Estonian

with "no_prefix"
ee.localhost:3000/ => English
localhost:3000/ => English
localhost:3000/ee/ => Doesn't exist

Expected behaviour using "no_prefix" IIUC:
ee.localhost:3000/ => Estonian
localhost:3000/ => English
localhost:3000/ee/ => Doesn't exist

P.S. Since I'm a beginner in web-dev and programming, I might have just messed up something. If so, then sorry for bothering you.
Thanks for help in advance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions