fix: default language multi domain locales (#3250)

Co-authored-by: Vincent de Vreede <vincentdevreede@live.nl>
Co-authored-by: Dotwood Media <info@dotwood.media>

Author: DotwoodMedia

docs/content/docs/2.guide/10.multi-domain-locales.md

@@ -98,8 +98,7 @@ With the above config, a build would have to be run for staging and production w
 
 ## 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`{lang="ts"} so there is a per domain fallback locale.
-The option `differentDomains` still need to be set to `true`{lang="ts"} though.
+If multiple domains share the same default language, you can specify them all using `defaultForDomains`, which supports multiple domains.
 
 ```js {}[nuxt.config.js]
 const i18nDomains = ['mydomain.com', 'en.mydomain.com', 'es.mydomain.com', 'fr.mydomain.com', 'http://pl.mydomain.com', 'https://ua.mydomain.com']

specs/fixtures/multi_domains_locales/i18n.config.ts

@@ -13,6 +13,12 @@ export default {
         blog: {
           article: "Cette page d'article de blog"
         }
+      },
+      parent: {
+        text: 'Test de la voie parentale',
+        child: {
+          text: 'Test de parcours pour enfants'
+        }
       }
     },
     en: {
@@ -26,6 +32,12 @@ export default {
         blog: {
           article: 'This is blog article page'
         }
+      },
+      parent: {
+        text: 'Parent route test',
+        child: {
+          text: 'Child route test'
+        }
       }
     },
     no: {
@@ -39,6 +51,12 @@ export default {
         blog: {
           article: 'Dette er bloggartikkelsiden'
         }
+      },
+      parent: {
+        text: 'Forældrerutetest',
+        child: {
+          text: 'Børns rute test'
+        }
       }
     }
   },

specs/fixtures/multi_domains_locales/pages/parent.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <p id="parent-text">{{ t('parent.text') }}</p>
+  <NuxtPage />
+</template>

specs/fixtures/multi_domains_locales/pages/parent/child.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <p id="child-text">{{ t('parent.child.text') }}</p>
+</template>

specs/multi_domains_locales/multi_domains_locales_multi_locales.spec.ts

@@ -81,3 +81,21 @@ test('detection locale with x-forwarded-host on server', async () => {
   expect(dom.querySelector('#lang-switcher-current-locale code').textContent).toEqual('fr')
   expect(dom.querySelector('#home-header').textContent).toEqual('Accueil')
 })
+
+describe('detection locale with child routes', () => {
+  test.each([
+    ['/parent/child', 'nuxt-app.localhost', 'Parent route test', 'Child route test'],
+    ['/no/parent/child', 'nuxt-app.localhost', 'Forældrerutetest', 'Børns rute test'],
+    ['/fr/parent/child', 'nuxt-app.localhost', 'Test de la voie parentale', 'Test de parcours pour enfants']
+  ])('%s host', async (path, host, parentText, childText) => {
+    const res = await undiciRequest(path, {
+      headers: {
+        Host: host
+      }
+    })
+    const dom = getDom(await res.body.text())
+
+    expect(dom.querySelector('#parent-text').textContent).toEqual(parentText)
+    expect(dom.querySelector('#child-text').textContent).toEqual(childText)
+  })
+})

src/routing.ts

@@ -175,7 +175,7 @@ export function localizeRoutes(routes: NuxtPage[], options: LocalizeRoutesParams
         ) {
           localizedRoutes.push({
             ...localized,
-            name: `${localized.name}___default`
+            name: `${localized.name}___${options.defaultLocaleRouteNameSuffix}`
           })
         }
 

src/runtime/internal.ts

@@ -397,21 +397,22 @@ export function setupMultiDomainLocales(nuxtContext: NuxtApp, defaultLocaleDomai
   const router = useRouter()
   const defaultRouteSuffix = [routesNameSeparator, defaultLocaleRouteNameSuffix].join('')
 
-  // remove or rename default routes if not applicable for domain
+  // Adjust routes to match the domain's locale and structure
   for (const route of router.getRoutes()) {
     const routeName = getRouteName(route.name)
 
-    if (!routeName.includes(defaultRouteSuffix)) continue
+    if (routeName.endsWith(defaultRouteSuffix)) {
+      router.removeRoute(routeName)
+      continue
+    }
 
     const routeNameLocale = routeName.split(routesNameSeparator)[1]
     if (routeNameLocale === defaultLocaleDomain) {
-      route.name = routeName.replace(defaultRouteSuffix, '')
-      continue
+      router.addRoute({
+        ...route,
+        path: route.path === `/${routeNameLocale}` ? '/' : route.path.replace(`/${routeNameLocale}`, '')
+      })
     }
-
-    // use `route.name` directly as `routeName` stringifies `Symbol`
-    // @ts-expect-error type mismatch
-    router.removeRoute(route.name)
   }
 }