1

I am trying to migrate from vue-i18n to nuxt-i18n. So far, while using vue-i18n, I have managed the store myself. At the moment, I am stuck at the adaptation of my project, at the point of using nuxt-i18n with vuex. In my opinion, the documentation of nuxt-i18n is lacking essential information here.

My nuxt-i18n config looks as follows:

i18n: {
    lazy: true,
    langDir: '~/locales/',
    strategy: 'prefix_and_default',
    defaultLocale: 'en',
    detectBrowserLanguage: false,
    differentDomains: true,
    locales,
    vuex: {
        moduleName: 'nuxt-i18n',
        syncLocale: true,
        syncMessages: false,
        syncRouteParams: false
    }
}

My store, which was introduced before using nuxt-i18n, looks like this:

import { locales } from '~/services/i18n'

export const state = () => ({
    locales,
    locale: {}
})

export const mutations = {
    setLocale(state, locale) {
        if (state.locales.includes(locale)) {
            state.locale = locale
        }
    }
}

export const getters = {
    locales: (state) => {
        return state.locales
    },
    locale: (state, getters) => {
        return state.locale.iso ? state.locale : getters.getLocaleFromCode(this.$i18n.defaultLocale)
    },
    language: (state) => {
        return state.locale && state.locale.iso ? state.locale.iso.split('-')[0] : this.$i18n.defaultLocale
    },
    getLocaleFromCode: (state) => (code) => {
        code = code.split('-')[0]
        return state.locales.find((locale) => locale.iso === code)
    },
    getLocalesFromLanguage: (state) => (language) => {
        return state.locales.filter((locale) => locale.iso.split('-')[0] === language)
    }
}

The messages/translations are already loaded correctly, but it seems to me that I am using two stores (i18n and nuxt-i18n) beside each other at the moment, which somehow magical intersect with each other!? I don't understand, how I can merge my previous i18n store with the nuxt-i18n store so that in the end, I have only one single store for locale, locales, and for my functions. I also don't understand, if I even have to define locale and locales in the store, or if this is done automatically by nuxt-i18n, and thus I only have to find a way to define my functions.

Maybe someone can enlighten me, how to migrate my store from vue-i18n to nuxt-i18n correctly, and how nuxt-i18n and vuex are working together.

4

0 回答 0