All child components of a root instance are localized using the locale property of the VueI18n class. You can change the value of the locale property of the VueI18n instance as below.
1 2 3 4 5 6 7 8 9 10 11 12 13 | const i18n = new VueI18n({ locale: 'de', // set locale ... }) // create root Vue instance new Vue({ i18n, ... }).$mount('#app') // change other locale i18n.locale = 'en' |
You can also use component’s VueI18n instance referenced as the $i18n property which will be used to change the locale.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <template> <div class="locale-changer"> <select v-model="$i18n.locale"> <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option> </select> </div> </template> <script> export default { name: 'locale-changer', data () { return { langs: ['de', 'en'] } } } </script> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
