When numberFormats not specified for component, does not fallback to use numberFormat specified on VueI18n instance
See original GitHub issueVersions
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"
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (1 by maintainers)
Top Results From Across the Web
API references | Vue I18n
In Vue instance, If not specified component locale messages, ... the number format of format not exist in numberFormats option, fallback to ...
Read more >Composition API - Vue I18n
The Composer instance provides a translation API such as the t function, as well as properties such as locale and fallbackLocale , just...
Read more >More i18n with Vue: Formatting and Fallbacks - DigitalOcean
We'll also be covering how to handle fallbacks when no string is available for a locale. We'll be using the vue-i18n plugin written...
Read more >vue-i18n@9.2.2 - jsDocs.io
DatetimeFormat; I18nInjectionKey; NumberFormat; Translation; VERSION ... If options are not specified, you can be localized using the global ...
Read more >The Ultimate Vue Localization Guide | Phrase
Note » If we don't explicitly set the scope="global" prop on the <i18n-t> component we will get a console warning reading, “[intlify] Not...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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.