Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(lazy): only process lang files with js, ts and json extensions #1070

Merged
merged 2 commits into from
Feb 19, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/content/en/lazy-load-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ position: 9
category: Guide
---

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.
For apps 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 to `true`
* 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 a `file` 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 an `Object` or a `function` (supports `Promises`)
* Set `lazy` option to `true`.
* Set `langDir` option to the directory (can not be empty) that contains your translation files. Only `*.js`, `*.ts` and `*.json` files will be loaded.
* Configure `locales` option as an array of object, where each object has a `file` 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 an `Object` or a `function` (supports `Promises`).

Example files structure:

Expand Down
2 changes: 1 addition & 1 deletion docs/content/es/lazy-load-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Esto se puede lograr con **nuxt-i18n** al permitir que el módulo sepa dónde se
Para habilitar la carga diferida de traducciones, siga estos 4 pasos cuando configure **nuxt-i18n**:

* Establezca la opción `lazy` en `true`
* Establezca la opción `langDir` en el directorio que contiene sus archivos de traducción (esto NO puede estar vacío)
* Establezca la opción `langDir` en el directorio (esto NO puede estar vacío) que contiene sus archivos de traducción. Only `*.js`, `*.ts` and `*.json` files will be loaded.
* Configure la opción `locales` como una matriz de objetos, donde cada objeto tiene una clave `file` cuyo valor es el archivo de traducción correspondiente a la configuración local
* Opcionalmente, elimine todos los mensajes que haya pasado a vue-i18n mediante la opción `vueI18n`
* Cada `file` puede devolver un `Object` o una `function` (admite `Promises`)
Expand Down
6 changes: 5 additions & 1 deletion src/templates/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ export async function loadLanguageAsync (context, locale) {
}
if (!messages) {
try {
const langFileModule = await import(/* webpackChunkName: "lang-[request]" */ `~/<%= options.langDir %>${file}`)
const langFileModule = await import(
/* webpackChunkName: "lang-[request]" */
/* webpackInclude: /\.(js|ts|json)$/ */
`~/<%= options.langDir %>${file}`
)
const getter = langFileModule.default || langFileModule
messages = typeof getter === 'function' ? await Promise.resolve(getter(context, locale)) : getter
} catch (error) {
Expand Down