fix: inline options i18n module locale resolution (#2296)

* fix: inline options not being used for i18n module locale resolution

* test: assert inline options are being used

specs/fixtures/external_module/i18n-module/index.ts

@@ -0,0 +1,26 @@
+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: 'fr',
+            iso: 'fr-FR',
+            file: 'locale-file-module-fr.json',
+            name: 'Francais'
+          },
+          {
+            code: 'nl',
+            iso: 'nl-NL',
+            file: 'locale-file-module-nl.ts',
+            name: 'Nederlands'
+          }
+        ]
+      })
+    })
+  }
+})

specs/fixtures/external_module/i18n-module/locales/locale-file-module-fr.json

@@ -0,0 +1,3 @@
+{
+  "moduleLayerText": "This is a merged i18n module locale key in French"
+}

specs/fixtures/external_module/i18n-module/locales/locale-file-module-nl.ts

@@ -0,0 +1,3 @@
+export default defineI18nLocale(locale => ({
+  moduleLayerText: 'This is a merged i18n module locale key in Dutch'
+}))

specs/fixtures/inline_options/app.vue

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

specs/fixtures/inline_options/components/BasicUsage.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { navigateTo } from '#imports'
+import { useLocalePath, useSwitchLocalePath, useLocaleRoute, useI18n } from '#i18n'
+
+const { locale } = useI18n()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()
+const localeRoute = useLocaleRoute()
+
+const category = ref({
+  title: 'Kirby',
+  slug: 'nintendo'
+})
+
+function onClick() {
+  const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
+  if (route) {
+    return navigateTo(route.fullPath)
+  }
+}
+</script>
+
+<template>
+  <div id="basic-usage-section">
+    <h2>Docs Basic usages</h2>
+    <section id="vue-i18n-usage">
+      <h3>vue-i18n</h3>
+      <div class="vue-i18n">
+        <form>
+          <select v-model="locale">
+            <option value="en">en</option>
+            <option value="fr">fr</option>
+          </select>
+          <p>{{ $t('welcome') }}</p>
+        </form>
+      </div>
+    </section>
+    <section id="locale-path-usages">
+      <h3>localePath</h3>
+      <ul>
+        <li class="name">
+          <NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
+        </li>
+        <li class="path">
+          <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
+        </li>
+        <li class="named-with-locale">
+          <NuxtLink :to="localePath('index', 'en')">Homepage in English</NuxtLink>
+        </li>
+        <li class="nest-path">
+          <NuxtLink :to="localePath('/user/profile')">Route by path to: {{ $t('profile') }}</NuxtLink>
+        </li>
+        <li class="nest-named">
+          <NuxtLink :to="localePath('user-profile')">Route by name to: {{ $t('profile') }}</NuxtLink>
+        </li>
+        <li class="object-with-named">
+          <NuxtLink :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
+            {{ category.title }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </section>
+    <section id="switch-locale-path-usages">
+      <h3>switchLocalePath</h3>
+      <ul>
+        <li class="switch-to-en">
+          <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
+        </li>
+        <li class="switch-to-fr">
+          <NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
+        </li>
+      </ul>
+    </section>
+    <section id="locale-route-usages">
+      <h3>localeRoute</h3>
+      <button @click="onClick">Show profile</button>
+    </section>
+  </div>
+</template>

specs/fixtures/inline_options/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 locales"
+        :key="index"
+        :exact="true"
+        :class="`switch-to-${locale.code}`"
+        :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 locales"
+        :id="`set-locale-link-${locale.code}`"
+        :key="`b-${index}`"
+        href="javascript:void(0)"
+        @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/inline_options/lang/locale-file-en.json

@@ -0,0 +1,6 @@
+{
+  "home": "Homepage",
+  "about": "About us",
+  "posts": "Posts",
+  "dynamic": "Dynamic"
+}

specs/fixtures/inline_options/lang/locale-file-ja.json

@@ -0,0 +1,6 @@
+{
+  "home": "Homepage in Japanese",
+  "about": "About us in Japanese",
+  "posts": "Posts in Japanese",
+  "dynamic": "Dynamic in Japanese"
+}

specs/fixtures/inline_options/nuxt.config.ts

@@ -0,0 +1,40 @@
+import i18nModule from '../external_module/i18n-module'
+
+// https://nuxt.com/docs/guide/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  modules: [
+    i18nModule,
+    [
+      '@nuxtjs/i18n',
+      {
+        debug: false,
+        lazy: false,
+        langDir: 'lang',
+        defaultLocale: 'en',
+        experimental: {
+          jsTsFormatResource: true
+        },
+        detectBrowserLanguage: false,
+        locales: [
+          {
+            code: 'en',
+            iso: 'en-US',
+            file: 'locale-file-en.json',
+            name: 'English'
+          }
+        ]
+      }
+    ]
+  ],
+  debug: false,
+  i18n: {
+    locales: [
+      {
+        code: 'ja',
+        iso: 'ja-JP',
+        file: 'locale-file-ja.json',
+        name: 'Japanese'
+      }
+    ]
+  }
+})

specs/fixtures/inline_options/package.json

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

specs/fixtures/inline_options/pages/category/[slug].vue

@@ -0,0 +1,3 @@
+<template>
+  <p>This is cateory page on '{{ $route.params.slug }}'</p>
+</template>

specs/fixtures/inline_options/pages/index.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useAsyncData, useHead, useRouter } from '#imports'
+import { useI18n, useLocalePath, useLocaleHead } from '#i18n'
+import BasicUsage from '../components/BasicUsage.vue'
+import LangSwitcher from '../components/LangSwitcher.vue'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+const i18nHead = useLocaleHead({
+  addDirAttribute: true,
+  identifierAttribute: 'id',
+  addSeoAttributes: { canonicalQueries: ['page'] },
+  router: useRouter()
+})
+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,
+    dir: i18nHead.value.htmlAttrs!.dir
+  },
+  link: [...(i18nHead.value.link || [])],
+  meta: [...(i18nHead.value.meta || [])]
+})
+</script>
+
+<template>
+  <div>
+    <h1 id="home-header">{{ $t('home') }}</h1>
+    <!-- <BasicUsage /> -->
+    <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>
+    <section>
+      <code id="extend-message">{{ t('my-module-exemple.hello') }}</code>
+    </section>
+    <NuxtLink id="link-about" exact :to="localePath('about')">{{ $t('about') }}</NuxtLink>
+    <NuxtLink id="link-blog" :to="localePath('blog')">{{ $t('blog') }}</NuxtLink>
+    <NuxtLink id="link-ignore-disable" :to="localePath('/ignore-routes/disable')"
+      >go to ignoring localized disable route</NuxtLink
+    >
+    <NuxtLink id="link-ignore-pick" :to="localePath('/ignore-routes/pick')"
+      >go to ignoring localized pick route</NuxtLink
+    >
+  </div>
+</template>

specs/fixtures/inline_options/pages/user/profile.vue

@@ -0,0 +1,3 @@
+<template>
+  <p id="profile-page">This is profile page</p>
+</template>