@nuxtjs/i18n exposes some callbacks that you can use to perform specific tasks that depend on the app's language.
onBeforeLanguageSwitch
Called before the app's locale is switched. Can be used to override the new locale by returning a new locale code.
Parameters:
- oldLocale: the app's locale before the switch
- newLocale: the app's locale after the switch
- isInitialSetup: 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. - nuxtApp: the Nuxt app
Returns: string
or nothing
onLanguageSwitched
Called right after the app's locale has been switched.
Parameters:
- oldLocale: the app's locale before the switch
- newLocale: 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).
/plugins/i18n.js
export default defineNuxtPlugin(nuxtApp => { // onBeforeLanguageSwitch called right before setting a new locale nuxtApp.$i18n.onBeforeLanguageSwitch = (oldLocale, newLocale, isInitialSetup, nuxtApp) => { console.log('onBeforeLanguageSwitch', oldLocale, newLocale, isInitialSetup) } // onLanguageSwitched called right after a new locale has been set nuxtApp.$i18n.onLanguageSwitched = (oldLocale, newLocale) => { console.log('onLanguageSwitched', oldLocale, newLocale) }})