Lazy-load translations
For app's that contain a lot of translated content, it is preferable not to bundle all the messages in the main bundle but rather lazy-load only the language that the users selected. This can be achieved with nuxt-i18n by letting the module know where your translation files are located so it can dynamically import them when the app loads or when the user switches to another language. To enable translations lazy-loading, follow these 4 steps when configuring nuxt-i18n:
- Set
lazy
option totrue
- Set
langDir
option to the directory that contains your translation files (this can NOT be empty) - Configure
locales
option as an array of object, where each object has afile
key which value is the translation file corresponding to the locale - Optionally, remove all messages that you might have passed to vue-i18n via
vueI18n
option - Each
file
can return either anObject
or afunction
(supportsPromises
)
Example files structure:
nuxt-project/
├── lang/
│ ├── en-US.js
│ ├── es-ES.js
│ ├── fr-FR.js
├── nuxt.config.js
Configuration example:
nuxt.config.js
['nuxt-i18n', {
locales: [
{
code: 'en',
file: 'en-US.js'
},
{
code: 'es',
file: 'es-ES.js'
},
{
code: 'fr',
file: 'fr-FR.js'
}
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'en'
}]
Language file example:
lang/en-US.js
export default async (context, locale) => {
await resolve({
welcome: 'Welcome'
})
}
// or
export default {
welcome: 'Welcome'
}