fix: crash on using nuxt-i18n properties in a component with i18n opt…

…ions (#736)

When component specifies some VueI18n options using a plain i18n object
in component options, VueI18n creates a separate component-local instance
of itself. That instance wasn't extend with nuxt-i18n-specific properties
that root instance has.

Fix by adding an API in vue-i18n for handling that and use here.

Resolves #557

package.json

@@ -87,7 +87,7 @@
     "cookie": "^0.4.0",
     "is-https": "^1.0.0",
     "js-cookie": "^2.2.1",
-    "vue-i18n": "^8.17.3"
+    "vue-i18n": "^8.18.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.6",

src/templates/plugin.main.js

@@ -193,20 +193,25 @@ export default async (context) => {
     await app.i18n.setLocale(finalLocale)
   }
 
+  const extendVueI18nInstance = i18n => {
+    i18n.locales = locales
+    i18n.defaultLocale = defaultLocale
+    i18n.differentDomains = differentDomains
+    i18n.beforeLanguageSwitch = beforeLanguageSwitch
+    i18n.onLanguageSwitched = onLanguageSwitched
+    i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieDomain, cookieKey })
+    i18n.getLocaleCookie = () => getLocaleCookie(req, { useCookie, cookieKey, localeCodes })
+    i18n.setLocale = (locale) => loadAndSetLocale(locale)
+  }
+
   // Set instance options
   const vueI18nOptions = typeof vueI18n === 'function' ? vueI18n(context) : vueI18n
+  vueI18nOptions.componentInstanceCreatedListener = extendVueI18nInstance
   app.i18n = new VueI18n(vueI18nOptions)
   // Initialize locale and fallbackLocale as vue-i18n defaults those to 'en-US' if falsey
   app.i18n.locale = ''
   app.i18n.fallbackLocale = vueI18nOptions.fallbackLocale || ''
-  app.i18n.locales = locales
-  app.i18n.defaultLocale = defaultLocale
-  app.i18n.differentDomains = differentDomains
-  app.i18n.beforeLanguageSwitch = beforeLanguageSwitch
-  app.i18n.onLanguageSwitched = onLanguageSwitched
-  app.i18n.setLocaleCookie = locale => setLocaleCookie(locale, res, { useCookie, cookieDomain, cookieKey })
-  app.i18n.getLocaleCookie = () => getLocaleCookie(req, { useCookie, cookieKey, localeCodes })
-  app.i18n.setLocale = (locale) => loadAndSetLocale(locale)
+  extendVueI18nInstance(app.i18n)
   app.i18n.__baseUrl = resolveBaseUrl(baseUrl, context)
   app.i18n.__onNavigate = onNavigate
 

test/fixture/basic/pages/loader-yaml.vue

@@ -1,7 +1,20 @@
 <template>
-  <p>{{ $t('hello') }}</p>
+  <div>
+    <p id="title">{{ $t('hello') }}</p>
+    <p id="locales">{{ locales }}</p>
+  </div>
 </template>
 
+<script>
+export default {
+  computed: {
+    locales () {
+      return this.$i18n.locales || []
+    }
+  }
+}
+</script>
+
 <i18n lang="yaml">
 en:
   hello: "hello world!"

test/module.test.js

@@ -392,6 +392,26 @@ for (const trailingSlash of TRAILING_SLASHES) {
       title = dom.querySelector('p')
       expect(title.textContent).toBe('Bonjour le monde!')
     })
+
+    test('can use nuxt-i18n extensions from component local i18n instance', async () => {
+      const html = await getRespectingTrailingSlash('/loader-yaml')
+      const dom = getDom(html)
+      const title = dom.querySelector('p#title')
+      expect(title.textContent).toBe('hello world!')
+      const locales = dom.querySelector('p#locales')
+      expect(JSON.parse(locales.textContent)).toMatchObject([
+        {
+          code: 'en',
+          iso: 'en',
+          name: 'English'
+        },
+        {
+          code: 'fr',
+          iso: 'fr-FR',
+          name: 'Français'
+        }
+      ])
+    })
   })
 }
 

yarn.lock

@@ -13200,10 +13200,10 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
-vue-i18n@^8.17.3:
-  version "8.17.5"
-  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.17.5.tgz#e34ceda4273a83be94c392358a227d66b76acb12"
-  integrity sha512-gijXwvyTH3aeJhuq8EoQ9SDDlm1mgJexNccSK1ctalxsa6C7ifbWiH7V/YGfm9WJ7udYoD8ezfZdazxxvKvKYw==
+vue-i18n@^8.18.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.18.0.tgz#3c20acea15d829c17c0262b1e4ff8dcf76eb56a3"
+  integrity sha512-7DVu8CfoyPoCRWB5TOqfw2kIhk2umagsri4L1V1c0s+lHUC0VbQYoucFprHUELyHU9Legqzt/FxyLGDpBOlX9w==
 
 vue-loader@^15.7.1, vue-loader@^15.9.1:
   version "15.9.2"