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, the newLocale property can be overridden to change the locale being switched to.

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, this property is deprecated, the same can be achieved by using const context = useNuxtApp() outside the hook scope instead.

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', (switch) => {
    console.log('onBeforeLanguageSwitch', switch.oldLocale, switch.newLocale, switch.initialSetup)

    // You can override the new locale by setting it to a different value
    if(switch.newLocale === 'fr') {
      switch.newLocale = 'en'
    }
  })

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