Vue3 / Vue-Cli4 TypeScript i18N Demo

App.vue

<template>
    <el-select v-model="selectedLanguageModel" placeholder="Please Select">
        <el-option
            v-for="(item) in LayoutLanguages"
            :key="item.param"
            :label="item.title"
            :value="item.param"
        >
        </el-option>
    </el-select>
</template>

<script lang="ts">
import {
    defineComponent, computed
} from 'vue'
import {
    LayoutLanguages
} from '@/i18n/config/locales'
import {
    useStore
} from 'vuex'
import {
    useI18n
} from 'vue-i18n

export default defineComponent({
    name: 'App',
    setup () {
        const store = useStore()
        const { locale } = useI18n()
        return {
            selectedLanguageModel: computed({
                get () {
                    return store.getters.selectedLanguage
                },
                set (value: string) {
                    locale.value = value
                    store.dispatch('selectNewDefaultLanguage', value)
                }
            }),
            LayoutLanguages
        }
    }
})
</script>

<style lang="scss" src="./styles/App.scss"></style>

index.ts

import {
    createStore
} from 'vuex'

// vue-i18n start
import {
    Locales
} from '@/i18n/config/locales'
import {
    defaultLocale
} from '@/i18n/config'
// vue-i18n end

import {
    RootState
} from './declarations/index'

const state: RootState = {
    selectedLanguage: defaultLocale
}

export default createStore({
    state,
    getters: {
        selectedLanguage: state => state.selectedLanguage
    },
    mutations: {
        setLanguage (state, payload: Locales) {
            state.selectedLanguage = payload
        }
    },
    actions: {
        selectNewDefaultLanguage ({ getters, commit }, lang: Locales) {
            const { selectedLanguage }: { selectedLanguage: Locales } = getters
            if (lang !== selectedLanguage) {
                commit('setLanguage', lang)
            }
        }
    }
})

main.ts

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueI18n from './i18n/entry'

const app = createApp(App)
app.use(VueI18n)
app.use(store).use(router).mount('#app')