Nuxt - @nuxtjs/i18n

Extension of Nuxt runtime app context

The following APIs are exposed both on NuxtApp.

$i18n

Type: VueI18n | Composer

$i18n is the global Composer or global VueI18n instance of Vue I18n. See about details here

If you set i18n.vueI18n.legacy option to false in your @nuxtjs/i18n configuration, $i18n is a global Composer instance. Otherwise, it is a global VueI18n instance.

Example use:

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.$i18n.onBeforeLanguageSwitch = (oldLocale, newLocale, isInitialSetup, nuxtApp) => {
    console.log('onBeforeLanguageSwitch', oldLocale, newLocale, isInitialSetup)
  }
})

$getRouteBaseName()

$switchLocalePath()

$localePath()

$localeRoute()

$localeHead()

See more info about those in Extension of Vue section.

Extension of NuxtHooks

`i18n:registerModule` Hook

Arguments:
- registerModule (type: ({ langDir: string, locales: LocaleObject[] }) => void)

my-module-example/module.ts

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 path needs to be resolved
        langDir: resolve('./lang'),
        locales: [
          {
            code: 'en',
            file: 'en.json',
          },
          {
            code: 'fr',
            file: 'fr.json',
          },
        ]
      })
    })
  }
})