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 {}