How do you perform locale changing?

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.

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.

<template>
<select v-model="$i18n.locale">
<option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
</select>
</template>

<script>
export default {
name: 'locale-changer',
data () {
return { langs: ['de', 'en'] }
}
}
</script>