Translation messages are not being loaded when locale is "en-US"

[theo-bittencourt]

Version

v6.6.0

Reproduction link

https://codesandbox.io/s/thirsty-fast-7iqw9

Steps to reproduce

1. Open the CodeSandbox link.
2. Navigate do /en-US (in the inner browser)

What is expected ?

Load the translations correctly.

What is actually happening?

1. Translation messages are not being loaded.

2. The following warning is emitted on console:

   [vue-i18n] Cannot translate the value of keypath 'commons.helloWorld'. Use the value of keypath as default. 
   

3. $nuxt._i18n.messages is empty.

Additional comments?

Investigation of the problem origin

loadAndSetLocale abort the translations loading when newLocale === app.i18n.locale:
https://github.com/nuxt-community/nuxt-i18n/blob/v6.6.0/src/plugins/main.js#L139

And app.i18n.locale is been defined as en-US on kazupon/vue-i18n:
https://github.com/kazupon/vue-i18n/blob/v8.x/src/index.js#L68

Workaround

I found a workaround but I don't know yet about the possible side effects:

// nuxt.config.js

i18n: {
  ...
  vueI18n: {
    locale: "---", // Defining an invalid locale to force nuxt-i18n to load translation
  }
  ...
}

Possible related thread on VueJS Forum:
https://forum.vuejs.org/t/i18n-cannot-translate-the-value-of-keypath/45334/4

_{This bug report is available on Nuxt community (#c415)}

[rchl]

Interesting case. Thank you for finding the exact problem.
It's a bit unfortunate that vue-i18n defaults to en-US. I would argue that it's not doing the right thing but I guess I will have to add a workaround for that (maybe the way you did it).