refactor!: read vue-i18n options from config path

docs/content/1.getting-started/2.basic-usage.md

@@ -8,34 +8,37 @@ The basics to get started with the Nuxt i18n module is to translate with Vue I18
 
 The basic to get started with **Nuxt i18n module** is to **translate with Vue I18n via the `vueI18n` option**
 
-So, let's get started configuring the following `nuxt.config`:
+So, let's get started by adding the module to `nuxt.config`:
 
 ```ts {}[nuxt.config.ts]
 export default defineNuxtConfig({
  modules: [
  '@nuxtjs/i18n'
  ],
  i18n: {
- // add `vueI18n` option to `@nuxtjs/i18n` module options
- vueI18n: {
- legacy: false,
- locale: 'en',
- messages: {
- en: {
- welcome: 'Welcome'
- },
- fr: {
- welcome: 'Bienvenue'
- }
- }
+ vueI18n: { configPath: './i18n.config.ts' } // if you are using custom path
+ }
+})
+```
+
+```ts {}[i18n.config.ts]
+export default defineI18nConfig({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ welcome: 'Welcome'
+ },
+ fr: {
+ welcome: 'Bienvenue'
  }
  }
 })
 ```
 
-The `vueI18n` option is the same as `createI18n` function option of Vue I18n. `vueI18n` option is passed to the `createI18n` function via the nuxt plugin of this module internally.
+The `defineI18nConfig` function is the same as `createI18n` function option of Vue I18n. The configuration is passed to the `createI18n` function via the nuxt plugin (runtime) of this module internally.
 
-For more details about the `vueI18n` option, see the [Vue I18n documentation](https://vue-i18n.intlify.dev/api/general.html#createi18n).
+For more details about configuration, see the [Vue I18n documentation](https://vue-i18n.intlify.dev/api/general.html#createi18n).
 
 Now, put (or edit) the following the page component in `pages` directory of you project:
 
@@ -103,18 +106,6 @@ For localizing links, you can use the code provided from the `locales` option as
  i18n: {
 + locales: ['en', 'fr'], // used in URL path prefix
 + defaultLocale: 'en', // default locale of your project for Nuxt pages and routings
- vueI18n: {
- legacy: false,
- locale: 'en',
- messages: {
- en: {
- welcome: 'Welcome'
- },
- fr: {
- welcome: 'Bienvenue'
- }
- }
- }
  }
  })
 ```

docs/content/2.guide/11.locale-fallback.md

@@ -7,27 +7,20 @@ How a fallback gets selected when a translation is missing.
 **Nuxt i18n module** takes advantage of **Vue I18n** ability to handle localization fallback. It is possible to define a single fallback locale, an array of locales,
 or a decision map for more specific needs.
 
-```js [nuxt.config.js]
-export default defineNuxtConfig({
- // ...
-
- i18n: {
- vueI18n: {
- fallbackLocale: 'en',
- // or
- fallbackLocale: ['en', 'fr'],
- // or
- fallbackLocale: {
- 'de-CH': ['fr', 'it'],
- 'zh-Hant': ['zh-Hans'],
- 'es-CL': ['es-AR'],
- 'es': ['en-GB'],
- 'pt': ['es-AR'],
- 'default': ['en', 'da']
- }
- }
- },
-
+```js [i18n.config.ts]
+export default defineI18nConfig({
+ fallbackLocale: 'en',
+ // or
+ fallbackLocale: ['en', 'fr'],
+ // or
+ fallbackLocale: {
+ 'de-CH': ['fr', 'it'],
+ 'zh-Hant': ['zh-Hans'],
+ 'es-CL': ['es-AR'],
+ 'es': ['en-GB'],
+ 'pt': ['es-AR'],
+ 'default': ['en', 'da']
+ }
  // ...
 })
 ```

docs/content/2.guide/15.migrating.md

@@ -4,6 +4,10 @@ Follow this guide to upgrade from one major version to the other.
 
 ---
 
+::alert{type="warning"}
+Here, deprecated = removed
+::
+
 ## Upgrading from `nuxtjs/i18n` v7.x
 
 ### Change the route key rules in `pages` option
@@ -177,3 +181,9 @@ The following APIs are no longer available:
 - `localeRoute()`
 - `localeLocation()`
 - `switchLocalePath()`
+
+### Deprecated `vueI18n` option to not accept `createI18n` options
+
+This is to ensure stability and distinction between compile / build-time and runtime since `vue-i18n` is used in runtime.
+
+You can continue defining `vue-i18n` options in `i18n.config.ts`. Refer to [Vue i18n](/options/vue-i18n) section and [basic usage](/getting-started/basic-usage/#translate-with-vue-i18n) for an example.

docs/content/2.guide/8.lazy-load-translations.md

@@ -164,10 +164,6 @@ export default defineNuxtConfig({
  lazy: true,
  langDir: 'lang',
  defaultLocale: 'en',
- vueI18n: {
- // If fallback is needed, you need to define
- fallbackLocale: 'en',
- }
  },
 
  // ...

docs/content/3.options/1.vue-i18n.md

@@ -6,26 +6,37 @@ Related Vue I18n options.
 
 ## `vueI18n`
 
-- type: `object` or `string`
-- default: `{}`
-
-Configuration for the `vue-i18n` library that is used internally by this module. See full documentation at https://vue-i18n.intlify.dev/api/general.html#createi18n
-
-::alert{type="info"}
-
-It's also supported to set this property to a path to a local configuration file. The file needs to export a function or plain object. If a function, it will be passed a Nuxt Context as a parameter. It's necessary to use that approach when overriding more complex types (like functions) that can't be stringified correctly.
-
-```ts {}[~/vue-i18n.options.ts]
-import type { I18nOptions } from 'vue-i18n'
-import type { NuxtApp } from 'nuxt/dist/app/index'
+- type: `object`
+- default: `undefined`
+
+Build-time configuration for the `vue-i18n` options that is used internally by this module. See full documentation at https://vue-i18n.intlify.dev/api/general.html#createi18n
+
+Configuration for `createI18n` can be passed using a configuration file. By default, the module will scan for a `i18n.config.{js,mjs,ts}` if nothing is specified.
+
+```ts {}[nuxt.config.ts]
+export default defineNuxtConfig({
+ modules: [
+ '@nuxtjs/i18n'
+ ],
+ i18n: {
+ vueI18n: { configPath: './nuxt-i18n.js' } // custom path example
+ }
+})
+```
 
-export default function (nuxt: NuxtApp) {
- return {
- modifiers: {
- snakeCase: (str) => str.split(' ').join('-')
+```ts {}[nuxt-i18n.js]
+export default defineI18nConfig({
+ legacy: false,
+ locale: 'en',
+ messages: {
+ en: {
+ welcome: 'Welcome'
+ },
+ fr: {
+ welcome: 'Bienvenue'
  }
- } as I18nOptions
-}
+ }
+})
 ```
 
 ::
@@ -34,6 +45,6 @@ export default function (nuxt: NuxtApp) {
 
 The `messages` option cannot be included in an object and exported with function due to limitations in Vue I18n v9 handling of locale messages.
 
-As the workaround, you can use [lazy-load transtions](/guide/lazy-load-translations) in Nuxt i18n module. locale messages handled with lazy-load transtions will be loaded as locale messges inside Vue i18n.
+As the workaround, you can use [lazy-load transtions](/guide/lazy-load-translations) in Nuxt i18n module. locale messages handled with lazy-load transtions will be loaded as locale messages inside Vue i18n.
 
 ::

docs/content/4.API/1.composables.md

@@ -220,3 +220,17 @@ A function that is the dynamic locale messages loading, that has the following p
 
  - when you switch the locale with `setLocale`.
  - when the locale is switched with `<NuxtLink>`. for example, the route path resolved by `useSwitchLocalePath` or `$switchLocalePath`.
+
+## `defineI18nConfig`
+
+The `defineI18nConfig` defines the configuration to be passed to the `vue-i18n` plugin in runtime.
+
+You can use at JavaScript and TypeScript extension formats.
+
+### Parameters
+
+#### `config`
+
+**Type**: `I18nOptions`
+
+The object with configuration definition.

playground/i18n.config.ts

@@ -0,0 +1,18 @@
+// import { defineI18nConfig, type I18nOptions } from '@nuxtjs/i18n'
+
+// export default <I18nOptions>{
+export default defineI18nConfig({
+ legacy: false,
+ locale: 'en',
+ fallbackLocale: 'fr'
+ // messages: {
+ // ja: {
+ // hello: 'こんにちは！'
+ // }
+ // }
+ // fallbackLocale: {
+ // en: ['ja', 'fr', 'en-US'],
+ // ja: ['en', 'fr', 'ja-JP'],
+ // fr: ['en', 'ja', 'fr-FR']
+ // }
+})

playground/nuxt.config.ts

@@ -77,29 +77,14 @@ export default defineNuxtConfig({
  },
  // differentDomains: true,
  // skipSettingLocaleOnNavigate: true,
- detectBrowserLanguage: false,
+ detectBrowserLanguage: false
  // detectBrowserLanguage: {
  // useCookie: true,
  // // alwaysRedirect: true
  // // cookieKey: 'i18n_redirected',
  // // // cookieKey: 'my_custom_cookie_name',
  // // redirectOn: 'root'
  // },
- // vueI18n: './vue-i18n.options.ts'
- vueI18n: {
- legacy: false,
- locale: 'en',
- fallbackLocale: 'fr'
- // messages: {
- // ja: {
- // hello: 'こんにちは！'
- // }
- // }
- // fallbackLocale: {
- // en: ['ja', 'fr', 'en-US'],
- // ja: ['en', 'fr', 'ja-JP'],
- // fr: ['en', 'ja', 'fr-FR']
- // }
- }
+ // vueI18n: { configFile: './i18n.config.ts' }
  }
 })

src/gen.ts

@@ -43,7 +43,8 @@ export function generateLoaderOptions(
  dev: boolean
  ssg: boolean
  ssr: boolean
- } = { dev: true, ssg: false, ssr: true }
+ } = { dev: true, ssg: false, ssr: true },
+ vueI18nPath: string | false = false
 ) {
  const generatedImports = new Map<string, string>()
  const importMapper = new Map<string, string>()
@@ -83,7 +84,7 @@ export function generateLoaderOptions(
  return gen
  }
 
- let genCode = ''
+ let genCode = vueI18nPath ? `${genImport(vueI18nPath, 'vueI18nOptions')}\n` : ''
  const localeInfo = options.localeInfo || []
  const syncLocaleFiles = new Set<LocaleInfo>()
  const asyncLocaleFiles = new Set<LocaleInfo>()
@@ -135,25 +136,9 @@ export function generateLoaderOptions(
  genCode += `${Object.entries(options).map(([rootKey, rootValue]) => {
  if (rootKey === 'nuxtI18nOptions') {
  let genCodes = `export const resolveNuxtI18nOptions = async (context) => {\n`
- genCodes += ` const ${rootKey} = Object({})\n`
- for (const [key, value] of Object.entries(rootValue)) {
- if (key === 'vueI18n') {
- const optionLoaderVariable = `${key}OptionsLoader`
- genCodes += ` const ${optionLoaderVariable} = ${isObject(value)
- ? `async (context) => ${generateVueI18nOptions(value, misc.dev)}\n`
- : isString(value)
- ? `async (context) => import(${toCode(value)}).then(r => (r.default || r)(context))\n`
- : `async (context) => ${toCode({})}\n`
- }`
- genCodes += ` ${rootKey}.${key} = await ${optionLoaderVariable}(context)\n`
- if (isString(value)) {
- const parsedLoaderPath = parsePath(value)
- const loaderFilename = `${parsedLoaderPath.name}${parsedLoaderPath.ext}`
- genCodes += ` if (${rootKey}.${key}.messages) { console.warn("[${NUXT_I18N_MODULE_ID}]: Cannot include 'messages' option in '${loaderFilename}'. Please use Lazy-load translations."); ${rootKey}.${key}.messages = {}; }\n`
- }
- } else {
- genCodes += ` ${rootKey}.${key} = ${toCode(key === 'locales' ? stripPathFromLocales(value) : value)}\n`
- }
+ genCodes += ` const ${rootKey} = ${JSON.stringify(rootValue)}\n`
+ if (vueI18nPath) {
+ genCodes += `${rootKey}.vueI18n = vueI18nOptions\n`
  }
  genCodes += ` return nuxtI18nOptions\n`
  genCodes += `}\n`
@@ -300,25 +285,6 @@ function resolveLocaleRelativePath(relativeBase: string, langDir: string, file:
  return normalize(`${relativeBase}/${langDir}/${file}`)
 }
 
-function generateVueI18nOptions(options: Record<string, any>, dev: boolean): string {
- let genCode = 'Object({'
- for (const [key, value] of Object.entries(options)) {
- if (key === 'messages') {
- genCode += `${JSON.stringify(key)}: Object({`
- for (const [locale, localeMessages] of Object.entries(value)) {
- genCode += `${JSON.stringify(locale)}:${
- generateJSON(JSON.stringify(localeMessages), { type: 'bare', env: dev ? 'development' : 'production' }).code
- },`
- }
- genCode += '}),'
- } else {
- genCode += `${JSON.stringify(key)}:${toCode(value)},`
- }
- }
- genCode += '})'
- return genCode
-}
-
 function generateAdditionalMessages(value: Record<string, any>, dev: boolean): string {
  let genCode = 'Object({'
  for (const [locale, messages] of Object.entries(value)) {