In our Vue application, we load translations dynamically. Our strings will appear as codes/expressions before they arrive from the server.
Is there some way to tell Vue-i18n to default to blank if no message is loaded? Or can I override something to return an empty string?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can achieve this by adding the
fallbackLocaleattribute in theVueI18ninitialization.As in the demo below, locale
jais not available, therefore, it loadsfallbackLocale(I added empty strings in all properties of the default locale). p>Live Demo:
const messages = { en: { message: { tokyo: 'Tokyo', newyork: 'New York', london: 'London' } }, default: { message: { tokyo: '', newyork: '', london: '' } } } const i18n = new VueI18n({ locale: 'ja', fallbackLocale: 'default', messages, }) new Vue({ i18n, data: {cities: ['tokyo', 'newyork', 'london']} }).$mount('#app')<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-i18n/8.14.1/vue-i18n.min.js"></script> <div id="app"> <ul> <li v-for="city in cities" :key="city"> {{city}}: {{ $t("message." + city) }} </li> </ul> </div>