feat: allow configuration from app.config.ts and extending (@nuxt/schema).AppConfig

specs/basic_app_config.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { setup, url, createPage } from './utils'
+import { getText } from './helper'
+
+await setup({
+  rootDir: fileURLToPath(new URL(`./fixtures/basic_app_config`, import.meta.url)),
+  browser: true,
+  // prerender: true,
+  // overrides
+  nuxtConfig: {
+    i18n: {
+      locales: ['en', 'fr'],
+      defaultLocale: 'en'
+    }
+  }
+})
+
+test('basic app config', async () => {
+  const home = url('/')
+  const page = await createPage()
+  await page.goto(home)
+
+  // vue-i18n using
+  expect(await getText(page, '#vue-i18n-usage p')).toEqual('Welcome app config')
+
+  // URL path localizing with `useLocalePath`
+  expect(await page.locator('#locale-path-usages .name a').getAttribute('href')).toEqual('/')
+  expect(await page.locator('#locale-path-usages .path a').getAttribute('href')).toEqual('/')
+  expect(await page.locator('#locale-path-usages .named-with-locale a').getAttribute('href')).toEqual('/fr')
+
+  // Language switching path localizing with `useSwitchLocalePath`
+  expect(await page.locator('#switch-locale-path-usages .switch-to-en a').getAttribute('href')).toEqual('/')
+  expect(await page.locator('#switch-locale-path-usages .switch-to-fr a').getAttribute('href')).toEqual('/fr')
+})

specs/fixtures/basic_app_config/app.config.ts

@@ -0,0 +1,20 @@
+export default defineAppConfig({
+  i18n: {
+    vueI18n: {
+      legacy: false,
+      locale: 'en',
+      messages: {
+        fr: {
+          welcome: 'Bienvenue',
+          home: 'Accueil',
+          profile: 'Profil'
+        },
+        en: {
+          welcome: 'Welcome app config',
+          home: 'Homepage',
+          profile: 'Profile'
+        }
+      }
+    }
+  }
+})

specs/fixtures/basic_app_config/app.vue

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

specs/fixtures/basic_app_config/nuxt.config.ts

@@ -0,0 +1,4 @@
+// https://nuxt.com/docs/guide/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/i18n']
+})

specs/fixtures/basic_app_config/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "nuxt3-test-basic-usage",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "generate": "nuxi generate",
+    "preview": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxtjs/i18n": "latest",
+    "nuxt": "latest"
+  }
+}

specs/fixtures/basic_app_config/pages/index.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const { locale } = useI18n()
+const localePath = useLocalePath()
+const switchLocalePath = useSwitchLocalePath()
+</script>
+
+<template>
+  <div>
+    <section id="vue-i18n-usage">
+      <form>
+        <select v-model="locale">
+          <option value="en">en</option>
+          <option value="fr">fr</option>
+        </select>
+        <p>{{ $t('welcome') }}</p>
+      </form>
+    </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', 'fr')">Homepage in French</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>
+  </div>
+</template>

specs/fixtures/basic_usage/pages/index.vue

@@ -55,7 +55,7 @@ function onClick() {
         </li>
       </ul>
     </section>
-	    <section id="nuxt-link-locale-usages">
+    <section id="nuxt-link-locale-usages">
       <h3>NuxtLinkLocale</h3>
       <ul>
         <li class="name">

src/runtime/internal.ts

@@ -13,8 +13,9 @@ import JsCookie from 'js-cookie'
 import { parse, serialize } from 'cookie-es'
 import { hasProtocol } from 'ufo'
 import isHTTPS from 'is-https'
-import { useRequestHeaders, useRequestEvent } from '#imports'
+import { useRequestHeaders, useRequestEvent, useAppConfig } from '#imports'
 import { nuxtI18nOptionsDefault, localeMessages, NUXT_I18N_MODULE_ID, isSSG } from '#build/i18n.options.mjs'
+import { defu } from 'defu'
 
 import type { NuxtApp } from '#app'
 import type { I18nOptions, Locale, VueI18n, LocaleMessages, DefineLocaleMessage } from 'vue-i18n'
@@ -422,7 +423,11 @@ export function detectBrowserLanguage<Context extends NuxtApp = NuxtApp>(
       localeFrom
     )
 
-  const vueI18nLocale = locale || (nuxtI18nOptions.vueI18n as I18nOptions).locale
+  const appConfig = useAppConfig()
+
+  const vueI18nOptions = defu(nuxtI18nOptions.vueI18n, appConfig.i18n?.vueI18n) as I18nOptions
+
+  const vueI18nLocale = locale || vueI18nOptions.locale
   __DEBUG__ && console.log('detectBrowserLanguage: vueI18nLocale', vueI18nLocale)
 
   // handle cookie option to prevent multiple redirections

src/runtime/plugins/i18n.ts

@@ -13,7 +13,14 @@ import {
   getLocale,
   getComposer
 } from 'vue-i18n-routing'
-import { defineNuxtPlugin, useRouter, useRoute, addRouteMiddleware, defineNuxtRouteMiddleware } from '#imports'
+import {
+  defineNuxtPlugin,
+  useRouter,
+  useRoute,
+  addRouteMiddleware,
+  defineNuxtRouteMiddleware,
+  useAppConfig
+} from '#imports'
 import { localeCodes, resolveNuxtI18nOptions, nuxtI18nInternalOptions, isSSG } from '#build/i18n.options.mjs'
 import {
   loadInitialMessages,
@@ -34,6 +41,7 @@ import {
   detectBrowserLanguage,
   DefaultDetectBrowserLanguageFromResult
 } from '#build/i18n.internal.mjs'
+import { defu } from 'defu'
 
 import type { Composer, I18nOptions, Locale } from 'vue-i18n'
 import type { LocaleObject, ExtendProperyDescripters, VueI18nRoutingPluginOptions } from 'vue-i18n-routing'
@@ -77,7 +85,10 @@ export default defineNuxtPlugin(async nuxt => {
   })
   const getLocaleFromRoute = createLocaleFromRouteGetter(localeCodes, routesNameSeparator, defaultLocaleRouteNameSuffix)
 
-  const vueI18nOptions = nuxtI18nOptions.vueI18n as I18nOptions
+  const appConfig = useAppConfig()
+
+  const vueI18nOptions = defu(nuxtI18nOptions.vueI18n, appConfig.i18n?.vueI18n) as I18nOptions
+
   vueI18nOptions.messages = vueI18nOptions.messages || {}
   vueI18nOptions.fallbackLocale = vueI18nOptions.fallbackLocale ?? false
 

src/runtime/types.d.ts

@@ -7,6 +7,7 @@ import type {
   ComposerCustomProperties as _ComposerCustomProperties
 } from 'vue-i18n-routing'
 import type { I18nRoutingCustomProperties } from 'vue-i18n-routing/dist/vue-i18n'
+import type { I18nOptions } from 'vue-i18n'
 
 /**
  * Called before the app's locale is switched.
@@ -221,4 +222,12 @@ declare module 'vue-i18n' {
   }
 }
 
+declare module 'nuxt/schema' {
+  interface AppConfig {
+    i18n?: {
+      vueI18n?: I18nOptions
+    }
+  }
+}
+
 export {}