Menu
i'm new to vue-i18n, seams great, but have some challenge getting it to work probably.
All template translations are updated as expected when changing locale, but when
script
data() {
return {
locales: {
en: this.$i18n.t('topnav.lang.english'),
da: this.$i18n.t('topnav.lang.danish'),
sw: this.$i18n.t('topnav.lang.swedish'),
no: this.$i18n.t('topnav.lang.norwegian'),
}
}
},
template
WORKING
{{$t('topnav.lang.english')}}
NOT WORKING
<a class="dropdown-item">{{locales.en}}</a>
NOT WORKING
<a class="dropdown-item" @click="changeLocale(key)" v-for="(value, key) in locales">{{value}}</a>
i have tried a lot of things, eg. lazyload the languages files and so on, but with no luck.
784
If you want to switch the locale for the whole application, you need to change it via global property of i18n instance created with createI18n . If you don't want to inherit locale from global scope, you need to set sync of i18n component option to false .
Basic Usage To compose with useI18n in setup of Vue 3, there is one thing you need to do, you need set the legacy option of the createI18n function to false . The following is an example of adding the legacy option to createI18n : // ... // 2. Create i18n instance with options const i18n = VueI18n.
Vue I18n is internationalization plugin of Vue. js. It easily integrates some localization features to your Vue. js Application.
change from data to computed, data is not inherently reactive but luckily computed is!
the alternative is to directly put your translation in the template if you do not want to use computed
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
