feat(fallbackLocale): support vue-i18n decision map fallback (#992)

nuxt-modules · Dec 14, 2020 · b4c6cfd · b4c6cfd
1 parent 2e1259e
commit b4c6cfd
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 12 deletions.
diff --git a/docs/content/en/locale-fallback.md b/docs/content/en/locale-fallback.md
@@ -0,0 +1,34 @@
+---
+title: Locale fallback
+description: "How a fallback gets selected when a translation is missing"
+position: 12
+category: Guide
+---
+
+**nuxt-i18n** takes advantage of **vue-i18n** ability to handle localization fallback. It is possible to define a single fallback locale, an array of locales,
+or a decision map for more specific needs.
+
+```js [nuxt.config.js]
+modules: [
+  'nuxt-i18n'
+],
+
+i18n: {
+    vueI18n: {
+        fallbackLocale: 'en',
+        // or
+        fallbackLocale: ['en', 'fr'],
+        // or
+        fallbackLocale: {
+            'de-CH':   ['fr', 'it'],
+            'zh-Hant': ['zh-Hans'],
+            'es-CL':   ['es-AR'],
+            'es':      ['en-GB'],
+            'pt':      ['es-AR'],
+            'default': ['en', 'da']
+        }
+    }
+}
+```
+
+More information in [vue-i18n documentation](https://kazupon.github.io/vue-i18n/guide/fallback.html).
diff --git a/docs/content/en/migrating.md b/docs/content/en/migrating.md
@@ -1,7 +1,7 @@
 ---
 title: Migration guide
 description: Follow this guide to upgrade from one major version to the other.
-position: 13
+position: 14
 category: Guide
 ---
 

diff --git a/docs/content/en/vue-i18n-loader.md b/docs/content/en/vue-i18n-loader.md
@@ -1,7 +1,7 @@
 ---
 title: vue-i18n-loader
 description: "enable vue-i18n-loader"
-position: 12
+position: 13
 category: Guide
 ---
 

diff --git a/docs/content/es/different-domains.md b/docs/content/es/different-domains.md
@@ -1,7 +1,7 @@
 ---
 title: Diferentes dominios
 description: 'Es posible que desee utilizar un nombre de dominio diferente para cada idioma que admita su aplicación. Debe lograr esto:'
-position: 9
+position: 11
 category: Guía
 ---
 

diff --git a/docs/content/es/lang-switcher.md b/docs/content/es/lang-switcher.md
@@ -1,7 +1,7 @@
 ---
 title: Selector de  idiomas
 description: 'Cuando **nuxt-i18n** se carga en su aplicación, agrega su configuración `locales` a `this.$i18n` (o `app.i18n`), lo que hace que sea muy fácil mostrar un selector de  idiomas en cualquier lugar de su aplicación.'
-position: 9
+position: 10
 category: Guía
 ---
 

diff --git a/docs/content/es/lazy-load-translations.md b/docs/content/es/lazy-load-translations.md
@@ -1,7 +1,7 @@
 ---
 title: Carga diferida de traducciones
 description: 'Carga diferida de traducciones'
-position: 8
+position: 9
 category: Guía
 ---
 

diff --git a/docs/content/es/locale-fallback.md b/docs/content/es/locale-fallback.md
@@ -0,0 +1,34 @@
+---
+title: Locale fallback
+description: "How a fallback gets selected when a translation is missing"
+position: 12
+category: Guía
+---
+
+**nuxt-i18n** takes advantage of **vue-i18n** ability to handle localization fallback. It is possible to define a single fallback locale, an array of locales,
+or a decision map for more specific needs.
+
+```js [nuxt.config.js]
+modules: [
+  'nuxt-i18n'
+],
+
+i18n: {
+    vueI18n: {
+        fallbackLocale: 'en',
+        // or
+        fallbackLocale: ['en', 'fr'],
+        // or
+        fallbackLocale: {
+            'de-CH':   ['fr', 'it'],
+            'zh-Hant': ['zh-Hans'],
+            'es-CL':   ['es-AR'],
+            'es':      ['en-GB'],
+            'pt':      ['es-AR'],
+            'default': ['en', 'da']
+        }
+    }
+}
+```
+
+More information in [vue-i18n documentation](https://kazupon.github.io/vue-i18n/guide/fallback.html).
diff --git a/docs/content/es/migrating.md b/docs/content/es/migrating.md
@@ -1,7 +1,7 @@
 ---
 title:  Guía de migración
 description: 'Siga esta guía para actualizar de una versión principal a otra.'
-position: 11
+position: 14
 category: Guía
 ---
 

diff --git a/docs/content/es/seo.md b/docs/content/es/seo.md
@@ -1,7 +1,7 @@
 ---
 title: Optimización para motores de búsqueda
 description: 'Optimización para motores de búsqueda'
-position: 7
+position: 8
 category: Guía
 ---
 

diff --git a/docs/content/es/vue-i18n-loader.md b/docs/content/es/vue-i18n-loader.md
@@ -1,7 +1,7 @@
 ---
 title: vue-i18n-loader
 description: 'vue-i18n-loader'
-position: 10
+position: 13
 category: Guía
 ---
 

diff --git a/src/templates/plugin.main.js b/src/templates/plugin.main.js
@@ -90,10 +90,24 @@ export default async (context) => {
     // Lazy-loading enabled
     if (lazy) {
       const { loadLanguageAsync } = require('./utils')
-
-      // Load fallback locale.
-      if (app.i18n.fallbackLocale && newLocale !== app.i18n.fallbackLocale) {
-        await loadLanguageAsync(context, app.i18n.fallbackLocale)
+      const i18nFallbackLocale = app.i18n.fallbackLocale
+
+      // Load fallback locale(s).
+      if (i18nFallbackLocale) {
+        let localesToLoadPromises = []
+        if (Array.isArray(i18nFallbackLocale)) {
+          localesToLoadPromises = i18nFallbackLocale.map(fbLocale => loadLanguageAsync(context, fbLocale))
+        } else if (typeof i18nFallbackLocale === 'object') {
+          if (i18nFallbackLocale[newLocale]) {
+            localesToLoadPromises = localesToLoadPromises.concat(i18nFallbackLocale[newLocale].map(fbLocale => loadLanguageAsync(context, fbLocale)))
+          }
+          if (i18nFallbackLocale.default) {
+            localesToLoadPromises = localesToLoadPromises.concat(i18nFallbackLocale.default.map(fbLocale => loadLanguageAsync(context, fbLocale)))
+          }
+        } else if (newLocale !== i18nFallbackLocale) {
+          localesToLoadPromises.push(loadLanguageAsync(context, i18nFallbackLocale))
+        }
+        await Promise.all(localesToLoadPromises)
       }
 
       await loadLanguageAsync(context, newLocale)

diff --git a/test/fixture/fallback-locale/lang/de.js b/test/fixture/fallback-locale/lang/de.js
@@ -0,0 +1,3 @@
+export default {
+  deKey: 'de translation'
+}
diff --git a/test/fixture/fallback-locale/lang/en-GB.js b/test/fixture/fallback-locale/lang/en-GB.js
@@ -0,0 +1,3 @@
+export default {
+  enGBKey: 'en-GB translation'
+}
diff --git a/test/fixture/fallback-locale/lang/es.js b/test/fixture/fallback-locale/lang/es.js
@@ -0,0 +1,3 @@
+export default {
+  esKey: 'es translation'
+}
diff --git a/test/fixture/fallback-locale/lang/fr-FR.js b/test/fixture/fallback-locale/lang/fr-FR.js
@@ -0,0 +1,3 @@
+export default {
+  frFRKey: 'fr-FR translation'
+}
diff --git a/test/fixture/fallback-locale/nuxt.config.js b/test/fixture/fallback-locale/nuxt.config.js
@@ -0,0 +1,12 @@
+import { resolve } from 'path'
+import BaseConfig from '../base.config'
+
+/** @type {import('@nuxt/types').NuxtConfig} */
+const config = {
+  ...BaseConfig,
+
+  buildDir: resolve(__dirname, '.nuxt'),
+  srcDir: __dirname
+}
+
+module.exports = config
diff --git a/test/fixture/fallback-locale/pages/fallback.vue b/test/fixture/fallback-locale/pages/fallback.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <p data-test="fr-key">{{ $t('frFRKey') }}</p>
+    <p data-test="en-gb-key">{{ $t('enGBKey') }}</p>
+    <p data-test="es-key">{{ $t('esKey') }}</p>
+    <p data-test="de-key">{{ $t('deKey') }}</p>
+  </div>
+</template>