Localization

The "src/localization.vue" component bootstrapped in "src/App.vue" and manages ant-design-vue and vue-i18n packages.

Additional info: https://kazupon.github.io/vue-i18n/ and https://www.antdv.com/components/locale-provider/

Setting up the framework to a completed, translated web app in easy 3 steps:

Step 1: Adding translate config file

Add translate file to locales folder "src/locales/fr-FR.js" with some locale settings

src/locales/fr-FR.js
import localeAntd from 'ant-design-vue/lib/locale-provider/fr_FR'
const messages = {
topBar: {
issuesHistory: 'Histoire des problèmes',
...
},
}
export default {
locale: 'fr-FR',
localeAntd,
messages,
}

Step 2: Register configuration

Import added previously configuration in "src/localization.vue"

src/localization.vue
import french from 'locales/fr-FR'
const locales = {
'fr-FR': french,
...
}

Step 3: Add formatter to any component

{{ $t('topBar.issuesHistory') }}

How to dynamically change the language?

Just dispatch CHANGE_SETTING action for changing locale setting:

this.$store.commit('CHANGE_SETTING', {
setting: 'locale',
value: 'fr-FR',
})