Runtime Hooks

Nuxt i18n module provides runtime hooks to perform specific tasks based on your app's language.

Hooks

'i18n:beforeLocaleSwitch'

Called before the app's locale is switched. Can be used to override the new locale by returning a new locale code.

Parameters:

• oldLocale
  • type: string
  • The app's locale before the switch
• newLocale
  • type: string
  • The app's locale after the switch
• initialSetup
  • type: string
  • Set to true if it's the initial locale switch that triggers on app load. It's a special case since the locale is not technically set yet so we're switching from no locale to locale.
• context
  • type: NuxtApp
  • The Nuxt app

Returns: string | null

'i18n:localeSwitched'

Called right after the app's locale has been switched.

Parameters:

• oldLocale
  • type: string
  • The app's locale before the switch
• newLocale
  • type: string
  • The app's locale after the switch

Usage

A typical usage would be to define those callbacks via a plugin where you can access the app's context (useful if you need to change Axios' config when the language changes for example).

export default defineNuxtPlugin(nuxtApp => {
  // called right before setting a new locale
  nuxtApp.hook('i18n:beforeLocaleSwitch', ({ oldLocale, newLocale, initialSetup, context }) => {
    console.log('onBeforeLanguageSwitch', oldLocale, newLocale, initialSetup)
  })

  // called right after a new locale has been set
  nuxtApp.hook('i18n:localeSwitched', ({ oldLocale, newLocale }) => {
    console.log('onLanguageSwitched', oldLocale, newLocale)
  })
})