Vue-i18n: When numberFormats not specified for component, does not fallback to use numberFormat specified on VueI18n instance

[17cliu]

Versions

vue 2.2.6
vue-i18n 7.0.0

Bug description

I have component-based localization for my app. I initialize my VueI18n instance with both messages and numberFormats, and these are meant to be shared across the entire app. In _only_ the individual components where I have specified additional component-specific translations, I can access these "shared" messages but not the shared numberFormats.

Example code

main.js

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

// i18n config for app
const i18n = new VueI18n({
    locale: 'en-US',
    messages: {
        'en-US': {
            hello: 'hello world',
        },
        'ko-KR': {
            hello: '안녕하세요, 세상',
        }
    },
    numberFormats: {
        'en-US': {
            currency: {
                style: 'currency',
                currency: 'USD'
            }
        },
        'ko-KR': {
            currency: {
                style: 'currency',
                currency: 'KRW',
                currencyDisplay: 'symbol'
            }
        }
    }
});

// Init app, with i18n instance
new Vue({ i18n, /* ... */ });

Apple.vue (has component-specific i18n; $n(100, 'currency') unexpectedly throws error)

<template>
    <div>
        <!-- Template output: "hello world" -->
        <p>{{ $t('hello') }}</p>

        <!-- Template output: "i like apples" -->
        <p>{{ $t('apple') }}</p>

        <!-- Expected: "$100" -->
        <!-- Actual: Throws error, unless I repeat the `numberFormat` definition in this component. -->
        <p>{{ $n(100, 'currency') }}</p>
    </div>
</template>

<script>
export default {
    name: 'apple',
    i18n: {
        messages: {
            'en-US': {
                apple: 'i like apples',
            },
            'ko-KR': {
                apple: '사과를 좋아해요',
            }
        }
    }
};
</script>

Banana.vue (does NOT have component-specific i18n; therefore $n(100, 'currency') works as expected)

<template>
    <div>
        <!-- Template output: "hello world" -->
        <p>{{ $t('hello') }}</p>

        <!-- Template output: "$100" -->
        <p>{{ $n(100, 'currency') }}</p>
    </div>
</template>

<script>
export default {
    name: 'banana'
    // no translations for this component
};
</script>

Error thrown when evaluating $n(100, 'currency') in Apple.vue:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'currency' of undefined"

[kazupon]

Thank you for your reporting!

Sorry, I forget fallback localization of DateTime and Numer. 😭
I'll implement it for v7.1

[morgler]

Is this issue fixed in 7.6.0? I have a similar combination, where some messages and the dateTimeFormats are defined when instantiating Vue, but I also have some local translations in <i18n> tags with the SFC.

Although the component seems to render the global message correctly, I still get warnings for every globally defined translation key (message or dateTimeFormat) in the console:

Fall back to translate the keypath 'test' with root locale.

[SaraiDuek]

Same here, The translation and formatting is working well but still i get:
[vue-i18n] Fall back to 'en' number formats from 'en number formats.
for each translation.

Just to note, I have the flag silentTranslationWarn: true on.
From the docs, it's not clear if this flag is also meant for number formatting but if not, It might be nice to add it to it, or add a flag for suppressing number and dates warnings (especially until the bug is fixed).
If this flag supposed to suppress these warnings too, it is not working for me in this case.

[rudiba]

I receive the the same warnings when I use $n(cellValue, 'currency') or $n(cellValue, 'percent'):
Fall back to 'en' number formats from 'de number formats.
Fall back to number localization of root: key 'currency' .
Fall back to number localization of root: key 'percent' .

How can I disable this warnings? The flag silentTranslationWarn: true doesn't help me too.

The numberFormats config is this:

const numberFormats = {
  en: {
    currency: {
      style: 'currency',
      currency: 'EUR',
    },
    percent: {
      style: 'percent',
      minimumFractionDigits: 1,
    },
  },
  de: {
    currency: {
      style: 'currency',
      currency: 'EUR',
    },
    percent: {
      style: 'percent',
      minimumFractionDigits: 1,
    },
  },
};

[albernhagen]

Was there ever any update on this? I also have a similar problem as to @rudiba

[PizzaPete]

Same problem as @rudiba still occurs to me.

[vdachev]

Shouldn't the recently introduced silentFallbackWarn setting affect the behavior for number and date/time formatting as well?

[kepi0809]

I had the same issue with v8.11.2 luckily I updated to the latest version (8.15.5) and it works as expected