Configuration in i18n.config.ts vs nuxt.config.ts v9

[Kiansa]

Hi 👋
Most of the time when I follow the documentation to setup a new project, I find the documentation confusing. I will go through each one and suggest my improvement:

1. Usage:

I understand that this is a very basic usage example but lets be honest, i don't think anyone will be using it this way.
link

// i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome'
    },
    fr: {
      welcome: 'Bienvenue'
    }
  }
}))

my suggestion:
option 1: give the most common usage example
option 2: change usage to basic usage and add an additional page with common usage example

2. Confusing config:

Documentation suggests 2 places for config, We have a i18n: {} in nuxt.config.ts and another in i18n.config.ts .
Personally I get confused every single time because I think I can add all the i18n options of nuxt.config.ts in i18n.config.ts but then i realize I'm doing it wrong. this confusion should be common among devs that use lazy-load translations.
another reason that I want to place my i18n options in i18n.config.ts is that currently i18n is the longest object in my nuxt.config.ts and I prefer to have all these options in a seperate file. (30 languages = 30 line in nuxt config is not ideal)

Suggestion:
automatically set i18n options from ./i18n/i18n.config.ts something like this:

// ./i18n/i18n.config.ts
export default defineI18nConfig(() => ({
  // langDir: 'locales',
  lazy: true,
  baseUrl: process.env.SITE_URL,
  locales: [
    { code: 'en', name: 'English', language: 'en-US', file: 'en.json' },
    { code: 'es', name: 'Español', language: 'es-ES', file: 'es.json' },
    { code: 'fr', name: 'Français', language: 'fr-FR', file: 'fr.json' },
    // more locales
  ],
  debug: false,
  defaultLocale: 'en',
  // strategy: 'no_prefix',
  // strategy: 'prefix',
  // strategy: 'prefix_and_default',
  strategy: 'prefix_except_default',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    redirectOn: 'root',
  },
  // vueI18n: './i18n.config.ts', // if you are using custom path, default 👉 remove this
  vueI18n: {}, // 👈 set options directly here
}))

What do you think?

[BobbieGoede]

Thanks for your feedback!

1.

I agree, I have made some structural changes to the docs but I still want to review the content itself. The basic usage should show configuration purely using the module instead of configuring vue-i18n first, to prevent the confusing configuration issues you mention.

Feel free to add more suggestions in this discussion #3171!

2.

The main confusion is that i18n.config.ts is not meant for the module configuration but for vue-i18n specific configuration, and it doesn't help that there's overlap. We can't configure all vue-i18n options inside nuxt.config.ts as vue-i18n also accepts non-serializable data such as functions which will be used at runtime.

We need the module configuration to be set inside nuxt.config.ts 'statically', these are used at build time and need to be merged with any other layer configs. You can still define these options in a separate file, and import it in nuxt.config.ts and assign it to the i18n key or spread it onto the object.

[Kiansa]

Thanks for the clarification.
Regarding point 2. I took your suggestion and I defined the options in a separate file i18nOptions.ts like below:

import type { ModuleOptions } from '@nuxtjs/i18n'

export const i18nConfig: ModuleOptions = {
  lazy: true,
  baseUrl: process.env.SITE_URL,
  locales: [
    { code: 'en', name: 'English', language: 'en-US', file: 'en.json' },
    { code: 'es', name: 'Español', language: 'es-ES', file: 'es.json' },
    { code: 'fr', name: 'Français', language: 'fr-FR', file: 'fr.json' },
  ],
  debug: false,
  defaultLocale: 'en',
  strategy: 'prefix_except_default',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    redirectOn: 'root',
  },
}

and then imported it in nuxt.config.ts:

import { i18nConfig } from './i18n/i18nOptions'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  modules: [
    '@nuxtjs/i18n',
  ],

  i18n: i18nConfig,
})

Works perfectly fine! 👌