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"
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
messagesandnumberFormats, 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"messagesbut not the sharednumberFormats.Example code
main.js
Apple.vue (has component-specific i18n;
$n(100, 'currency')unexpectedly throws error)Banana.vue (does NOT have component-specific i18n; therefore
$n(100, 'currency')works as expected)Error thrown when evaluating
$n(100, 'currency')in Apple.vue: