Skip to content

Commit

Permalink
docs: clarify that "file" property requires "lazy" to be enabled
Browse files Browse the repository at this point in the history
Resolves #1033
  • Loading branch information
rchl committed Mar 24, 2021
1 parent 394ec7d commit 52d084d
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 9 deletions.
6 changes: 3 additions & 3 deletions docs/content/en/lazy-load-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ category: Guide

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**:
To enable translations lazy-loading, follow these steps when configuring **nuxt-i18n**:

* 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.
* Set `langDir` option to the directory (can not be empty) that contains your translation files.
* Configure `locales` option as an array of object, where each object has a `file` key whose 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`).

Expand Down
10 changes: 8 additions & 2 deletions docs/content/en/options-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ When using an object form, the properties can be:
- `iso` (required when using SEO features) - The ISO code used for SEO features and for matching browser locales when using [`detectBrowserLanguage`](#detectbrowserlanguage) functionality. Should be in one of those formats:
* ISO 639-1 code (e.g. `'en'`)
* ISO 639-1 and ISO 3166-1 alpha-2 codes, separated by hyphen (e.g. `'en-US'`)
- `file` (required when using [`lazy`](#lazy)) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
- `file` (requires [`lazy`](#lazy) to be enabled) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
- `dir` (from `v6.19.0`) The dir property specifies the direction of the elements and content, value could be `'rtl'`, `'ltr'` or `'auto'`.
- `domain` (required when using [`differentDomains`](#differentdomains)) - the domain name you'd like to use for that locale (including the port if used)
- `...` - any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.
Expand Down Expand Up @@ -131,7 +131,13 @@ See also [Lazy-load translations](/lazy-load-translations).
- type: `string` or `null`
- default: `null`

Directory that contains translation files when lazy-loading messages. This CAN NOT be empty if lazy-loading is enabled. Use Webpack paths like `~/locales/` (with trailing slash).
<alert type="warning">

This option only works and is required when `lazy` is enabled.

</alert>

Directory that contains translation files when lazy-loading messages. Use Webpack paths like `~/locales/` (with trailing slash).

## `detectBrowserLanguage`

Expand Down
4 changes: 2 additions & 2 deletions docs/content/es/lazy-load-translations.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@ category: Guía

Para las aplicaciones que contienen una gran cantidad de contenido traducido, es preferible no agrupar todos los mensajes en el paquete principal, sino cargar de manera diferida solo el idioma que seleccionaron los usuarios.
Esto se puede lograr con **nuxt-i18n** al permitir que el módulo sepa dónde se encuentran sus archivos de traducción para que pueda importarlos dinámicamente cuando se carga la aplicación o cuando el usuario cambia a otro idioma.
Para habilitar la carga diferida de traducciones, siga estos 4 pasos cuando configure **nuxt-i18n**:
Para habilitar la carga diferida de traducciones, siga estos pasos cuando configure **nuxt-i18n**:

* Establezca la opción `lazy` en `true`
* 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.
* Establezca la opción `langDir` en el directorio (esto NO puede estar vacío) que contiene sus archivos de traducción.
* 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
10 changes: 8 additions & 2 deletions docs/content/es/options-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ When using an object form, the properties can be:
- `iso` (required when using SEO features) - The ISO code used for SEO features and for matching browser locales when using [`detectBrowserLanguage`](#detectbrowserlanguage) functionality. Should be in one of those formats:
* ISO 639-1 code (e.g. `'en'`)
* ISO 639-1 and ISO 3166-1 alpha-2 codes, separated by hyphen (e.g. `'en-US'`)
- `file` (required when using [`lazy`](#lazy)) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
- `file` (requires [`lazy`](#lazy) to be enabled) - the name of the file. Will be resolved relative to `langDir` path when loading locale messages lazily
- `dir` (from `v6.19.0`) The dir property specifies the direction of the elements and content, value could be `'rtl'`, `'ltr'` or `'auto'`.
- `domain` (required when using [`differentDomains`](#differentdomains)) - the domain name you'd like to use for that locale (including the port if used)
- `...` - any custom property set on the object will be exposed at runtime. This can be used, for example, to define the language name for the purpose of using it in a language selector on the page.
Expand Down Expand Up @@ -131,7 +131,13 @@ See also [Lazy-load translations](/lazy-load-translations).
- type: `string` or `null`
- default: `null`

Directory that contains translation files when lazy-loading messages. This CAN NOT be empty if lazy-loading is enabled. Use Webpack paths like `~/locales/` (with trailing slash).
<alert type="warning">

This option only works and is required when `lazy` is enabled.

</alert>

Directory that contains translation files when lazy-loading messages. Use Webpack paths like `~/locales/` (with trailing slash).

## `detectBrowserLanguage`

Expand Down

0 comments on commit 52d084d

Please sign in to comment.