Fallback localization

The following locale messages with a message key that doesn't exist in the ja locale:

const messages = {
  en: {
    message: 'hello world'
  },
  ja: {
  }
}

When specifying the fallbackLocale option in the VueI18n constructor option, message key is localized with en locale key:

const i18n = new VueI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages
})

Template:

<p>{{ $t('message') }}</p>

Output:

<p>hello world</p>

Note that, by default, falling back to fallbackLocale generates two console warnings:

[vue-i18n] Value of key 'message' is not a string!
[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale.

To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set silentFallbackWarn: true when initializing the VueI18n instance.

Fallback interpolation

Since the keys to the translations are strings, the original message can be used as a key instead of the path. E.g.

const messages = {
  ja: {
    'Hello world': 'こんにちは、世界'
  }
}

This way the translations can be used in a very natural way, automatically falling back to the source language if the translated string cannot be found:

<p>{{ $t('Hello world') }}</p>

To enrich this feature, interpolation of fallback messages can be turned on by setting formatFallbackMessages to true:

const messages = {
  ru: {
    'Hello {name}': 'Здравствуйте {name}'
  }
}

const i18n = new VueI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  formatFallbackMessages: true,
  messages
})

When the template is as below:

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>

The following will be output:

<p>Здравствуйте John</p>
<p>The weather today is sunny!</p>
Last Updated: 10/3/2019, 11:20:19 AM