fix: reuse server-side locale detection (#3684)

Author: BobbieGoede

pnpm-lock.yaml

@@ -2,6 +2,7 @@ packages:
   - docs
   - playground
   - specs/fixtures/*
+  - specs/fixtures/issues/*
 onlyBuiltDependencies:
   - '@parcel/watcher'
   - '@tailwindcss/oxide'

pnpm-workspace.yaml

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>

specs/fixtures/issues/3039/app.vue

@@ -0,0 +1,3 @@
+{
+  "welcome": "Welcome"
+}

specs/fixtures/issues/3039/i18n/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "welcome": "Bienvenue"
+}

specs/fixtures/issues/3039/i18n/locales/fr.json

@@ -0,0 +1,16 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n'],
+  i18n: {
+    strategy: 'no_prefix',
+    // When using prefix_except_default strategy
+    detectBrowserLanguage: false,
+    defaultLocale: 'fr',
+    locales: [
+      { code: 'fr', file: 'fr.json', name: 'Français' },
+      { code: 'en', file: 'en.json', name: 'English' }
+    ]
+  },
+  compatibilityDate: '2024-07-23'
+})

specs/fixtures/issues/3039/nuxt.config.ts

@@ -0,0 +1,14 @@
+{
+  "name": "fixture-3039",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/issues/3039/package.json

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+const { locale, setLocale } = useI18n()
+
+if (import.meta.server) {
+  await setLocale('en')
+}
+</script>
+
+<template>
+  <div data-testid="locale">{{ locale }}</div>
+  <p data-testid="welcome">{{ $t('welcome') }}</p>
+</template>

specs/fixtures/issues/3039/pages/index.vue

@@ -0,0 +1,19 @@
+import { test, expect, describe } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { createPage, setup } from '../utils'
+
+describe('#3039', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL(`../fixtures/issues/3039`, import.meta.url)),
+    browser: true
+  })
+
+  test('does not detect and set locale client-side if locale has been detected and set server-side', async () => {
+    // localized routing is disabled (no_prefix or defineI18nRoute(false))
+    const page = await createPage('/')
+
+    // default locale is `fr` but has been set to `en` server-side
+    expect(await page.getByTestId('locale').textContent()).toEqual('en')
+    expect(await page.getByTestId('welcome').textContent()).toEqual('Welcome')
+  })
+})

specs/issues/3039.spec.ts

@@ -26,6 +26,8 @@ export const useLocaleConfigs = () =>
     () => undefined
   )
 
+export const useResolvedLocale = () => useState<string>('i18n:resolved-locale', () => '')
+
 /**
  * @internal
  */
@@ -91,6 +93,7 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
   const getDomainFromLocale = (locale: string) =>
     domainFromLocale(runtimeI18n.domainLocales, useRequestURL({ xForwardedHost: true }), locale)
   const baseUrl = createBaseUrlGetter(nuxt, runtimeI18n.baseUrl, defaultLocale, getDomainFromLocale)
+  const resolvedLocale = useResolvedLocale()
 
   const ctx: NuxtI18nContext = {
     vueI18n,
@@ -112,6 +115,8 @@ export function createNuxtI18nContext(nuxt: NuxtApp, vueI18n: I18n, defaultLocal
       }
 
       await nuxt.callHook('i18n:localeSwitched', { newLocale: locale, oldLocale })
+
+      resolvedLocale.value = locale
     },
     setLocaleSuspend: async (locale: string) => {
       if (!isSupportedLocale(locale)) return