fix: locale switching middleware in static build (#3323)

specs/fixtures/lazy-without-server/app.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>
+
+<style>
+section {
+  margin: 1rem 0;
+}
+</style>

specs/fixtures/lazy-without-server/components/LangSwitcher.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useI18n, useSwitchLocalePath } from '#i18n'
+
+const { locales, locale, setLocale } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+
+const localesExcludingCurrent = computed(() => {
+  return locales.value.filter(i => i.code !== locale.value)
+})
+</script>
+
+<template>
+  <div>
+    <section id="lang-switcher-with-nuxt-link">
+      <strong>Using <code>NuxtLink</code></strong
+      >:
+      <NuxtLink
+        v-for="(locale, index) in localesExcludingCurrent"
+        :key="index"
+        :id="`lang-switcher-with-nuxt-link-${locale.code}`"
+        :exact="true"
+        :to="switchLocalePath(locale.code)"
+        >{{ locale.name }}</NuxtLink
+      >
+    </section>
+    <section id="lang-switcher-with-set-locale">
+      <strong>Using <code>setLocale()</code></strong
+      >:
+      <a
+        v-for="(locale, index) in localesExcludingCurrent"
+        :id="`set-locale-link-${locale.code}`"
+        :key="`b-${index}`"
+        href="#"
+        @click.prevent="setLocale(locale.code)"
+        >{{ locale.name }}</a
+      >
+    </section>
+    <section id="lang-switcher-current-locale">
+      <strong
+        >Current Locale: <code>{{ locale }}</code></strong
+      >:
+    </section>
+  </div>
+</template>

specs/fixtures/lazy-without-server/i18n-module/index.ts

@@ -0,0 +1,20 @@
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+    nuxt.hook('i18n:registerModule', register => {
+      register({
+        langDir: resolve('./locales'),
+        locales: [
+          {
+            code: 'nl',
+            language: 'nl-NL',
+            file: 'lazy-locale-module-nl.ts',
+            name: 'Nederlands'
+          }
+        ]
+      })
+    })
+  }
+})

specs/fixtures/lazy-without-server/i18n-module/locales/lazy-locale-module-nl.ts

@@ -0,0 +1,5 @@
+export default defineI18nLocale(locale => ({
+  moduleLayerText: 'This is a merged module layer locale key in Dutch',
+  welcome: 'Welkom!',
+  dynamicTime: new Date().toISOString()
+}))

specs/fixtures/lazy-without-server/i18n.config.ts

@@ -0,0 +1,5 @@
+export default {
+  legacy: false,
+  messages: {},
+  fallbackLocale: 'en'
+}

specs/fixtures/lazy-without-server/lang/lazy-locale-en-GB.js

@@ -0,0 +1,14 @@
+export default defineI18nLocale(async function (locale) {
+  return {
+    html: '<span>This is the danger</span>',
+    settings: {
+      nest: {
+        foo: {
+          bar: {
+            profile: 'Profile1'
+          }
+        }
+      }
+    }
+  }
+})

specs/fixtures/lazy-without-server/lang/lazy-locale-en-GB.ts

@@ -0,0 +1,3 @@
+export default {
+  settings_nest_foo_bar_profile: 'Profile2'
+}

specs/fixtures/lazy-without-server/lang/lazy-locale-en.json

@@ -0,0 +1,9 @@
+{
+  "home": "Homepage",
+  "about": "About us",
+  "posts": "Posts",
+  "dynamic": "Dynamic",
+  "html": "<span>This is the danger</span>",
+  "dynamicTime": "Not dynamic",
+  "welcome": "Welcome!"
+}

specs/fixtures/lazy-without-server/lang/lazy-locale-fr.json5

@@ -0,0 +1,7 @@
+{
+  home: 'Accueil',
+  about: 'À propos',
+  posts: 'Articles',
+  dynamic: 'Dynamique',
+  dynamicTime: 'Not dynamic'
+}

specs/fixtures/lazy-without-server/nuxt.config.ts

@@ -0,0 +1,58 @@
+import i18nModule from './i18n-module'
+
+// https://nuxt.com/docs/guide/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  vite: {
+    // Prevent reload by optimizing dependency before discovery
+    optimizeDeps: {
+      include: ['@unhead/vue']
+    },
+    // https://nuxt.com/blog/v3-11#chunk-naming
+    // We change the chunk file name so we can detect file requests in our tests
+    $client: {
+      build: {
+        rollupOptions: {
+          output: {
+            chunkFileNames: '_nuxt/[name].js',
+            entryFileNames: '_nuxt/[name].js'
+          }
+        }
+      }
+    }
+  },
+  modules: [i18nModule, '@nuxtjs/i18n'],
+  i18n: {
+    debug: true,
+    restructureDir: false,
+    baseUrl: 'http://localhost:3000',
+    // langDir: 'lang',
+    // defaultLocale: 'fr',
+    detectBrowserLanguage: false,
+    compilation: {
+      strictMessage: false
+    },
+    defaultLocale: 'en',
+    langDir: 'lang',
+    lazy: true,
+    locales: [
+      {
+        code: 'en',
+        language: 'en-US',
+        file: 'lazy-locale-en.json',
+        name: 'English'
+      },
+      {
+        code: 'en-GB',
+        language: 'en-GB',
+        files: ['lazy-locale-en.json', 'lazy-locale-en-GB.js', 'lazy-locale-en-GB.ts'],
+        name: 'English (UK)'
+      },
+      {
+        code: 'fr',
+        language: 'fr-FR',
+        file: { path: 'lazy-locale-fr.json5', cache: false },
+        name: 'Français'
+      }
+    ]
+  }
+})

specs/fixtures/lazy-without-server/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "nuxt3-test-lazy",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/lazy-without-server/pages/about/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n, useLocalePath } from '#i18n'
+import LangSwitcher from '../../components/LangSwitcher.vue'
+
+const { localeProperties } = useI18n()
+const localePath = useLocalePath()
+const code = computed(() => {
+  return localeProperties.value.code
+})
+
+/*
+// TODO: defineNuxtI18n macro
+defineNuxtI18n({
+  paths: {
+    en: '/about-us',
+    fr: '/a-propos'
+  }
+})
+*/
+</script>
+
+<template>
+  <div>
+    <h1 id="about-header">{{ $t('about') }}</h1>
+    <LangSwitcher />
+    <!-- div id="store-path-fr">{{ $store.state.routePathFr }}</div -->
+    <section>
+      <strong
+        >code: <code id="locale-properties-code">{{ code }}</code></strong
+      >
+    </section>
+    <NuxtLink id="link-home" exact :to="localePath('index')">{{ $t('home') }}</NuxtLink>
+  </div>
+</template>

specs/fixtures/lazy-without-server/pages/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useAsyncData, useHead } from '#imports'
+import { useI18n, useLocalePath, useLocaleHead } from '#i18n'
+import LangSwitcher from '../components/LangSwitcher.vue'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const i18nHead = useLocaleHead({ seo: { canonicalQueries: ['page'] } })
+const { data, refresh } = useAsyncData('home', () =>
+  Promise.resolve({
+    aboutPath: localePath('about'),
+    aboutTranslation: t('about')
+  })
+)
+
+watchEffect(() => {
+  refresh()
+})
+
+useHead(() => ({
+  title: t('home'),
+  htmlAttrs: {
+    lang: i18nHead.value.htmlAttrs!.lang
+  },
+  link: [...(i18nHead.value.link || [])],
+  meta: [...(i18nHead.value.meta || [])]
+}))
+</script>
+
+<template>
+  <div>
+    <h1 id="home-header">{{ $t('home') }}</h1>
+    <LangSwitcher />
+    <section>
+      <strong>resolve with <code>useAsyncData</code></strong
+      >:
+      <code id="home-use-async-data">{{ data }}</code>
+    </section>
+    <section>
+      <strong><code>useHead</code> with <code>useLocaleHead</code></strong
+      >:
+      <code id="home-use-locale-head">{{ i18nHead }}</code>
+    </section>
+    <NuxtLink id="link-about" exact :to="localePath('about')">{{ $t('about') }}</NuxtLink>
+    <p id="profile-js">{{ $t('settings.nest.foo.bar.profile') }}</p>
+    <p id="profile-ts">{{ $t('settings_nest_foo_bar_profile') }}</p>
+    <p id="html-message" v-html="$t('html')"></p>
+    <p id="dynamic-time">{{ $t('dynamicTime') }}</p>
+  </div>
+</template>

specs/fixtures/lazy-without-server/pages/manual-load.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from '#i18n'
+import { computed } from 'vue'
+
+const { loadLocaleMessages, t } = useI18n()
+
+await loadLocaleMessages('nl')
+
+const welcome = computed(() => t('welcome'))
+const welcomeDutch = computed(() => t('welcome', 1, { locale: 'nl' }))
+</script>
+
+<template>
+  <div>
+    <span id="welcome-english">{{ welcome }}</span>
+    <span id="welcome-dutch">{{ welcomeDutch }}</span>
+  </div>
+</template>