Load message from API - SSR supported

[kiennt2]

This is not a bug report, just share what i have done

By apply this approach, you can get locale message from database, you can have many locale as you want on your app
Default locale with no prefix
No more performance & memory leak issue
...

If you have any solution better than this, pls share with me, i would love to change :)

...

first thing, your should restructure the pages folder like this

next, i have a config file ./i18n.config.ts like this:

export default {
    legacy               : false,
    strategy             : 'no_prefix',
    locale               : 'en-US',
    defaultLocale        : 'en-US',
    fallbackLocale       : 'en-US',
    experimental         : {
        localeDetector: './locales/serverDetector.ts'
    },
    detectBrowserLanguage: false
}

sever detector './locales/serverDetector.ts'

// Detect based on query, cookie, header
export default defineI18nLocaleDetector((event, config) => {
    // If the locale cannot be resolved up to this point, it is resolved with the value `defaultLocale` of the locale config passed to the function
    let locale = config.defaultLocale

    // try to get locale from query
    const query = tryQueryLocale(event, {lang: ''}) // disable locale default value with `lang` option
    if (query) {
        locale = query.toString()
    }

    // try to get locale from cookie
    const cookie = tryCookieLocale(event, {lang: '', name: 'i18n_locale'}) // disable locale default value with `lang` option
    if (cookie) {
        locale = cookie.toString()
    }

    // try to get locale from header (`accept-header`)
    const header = tryHeaderLocale(event, {lang: ''}) // disable locale default value with `lang` option
    if (header) {
        locale = header.toString()
    }

    event.context.locale = locale

    return locale
})

util to fetch locale data ./utils/loadLocaleMessageFromApi.ts

// THIS IS SAMPLE, USE ANY FETCH VERSION FIT WITH YOUR BUSINESS

import { Common, Translation } from '~/interfaces'
import psl from 'psl'

export default async (url: string, locale: string, fetchInstance: any) => {
    let subDomain: string = 'www' // www is default channel
    if (url) {
        try {
            const parsed = psl.parse(url.hostname || '')
            subDomain    = parsed.error ? subDomain : parsed.subdomain || subDomain
        } catch (e) {
            console.log(e)
        }
    }
    const {data} = await fetchInstance<Common.IBasicPaging<Translation.Entity>>('/api/translation/all', {
        method: 'get',
        params: {
            channel_sub_domain: subDomain,
            locale_code       : locale
        }
    })
    return data && data.length ? data[0].data : null
}

i18n plugin to load locale data when app init ./plugins/i18n.ts

import { Country, Channel } from '~/interfaces'

export default defineNuxtPlugin(async nuxtApp => {
    const i18n               = nuxtApp.$i18n
    const route: any         = useRoute()
    let validLocale: boolean = false

    // NOTE: i have a middleware that detect channel based on request origin
    // useFetchData() is my custom fetch instance to add some extra data
    const {data: channel} = await useFetchData<Channel.IStorefrontSettings>('/api/settings/storefront')
    channel?.value.currentChannel.locales.map((l: Country.ILanguage) => {
        if (l.code === route.params.locale) {
            validLocale = true
        }
    })
    
    // NOTE: make sure default message data existing in your database, in this sample, my default locale is en-US
    const toLocale = validLocale ? route.params.locale : channel?.value.currentChannel.defaultLocale.code || 'en-US'
    const data     = await loadLocaleMessageFromApi(useRequestURL(), toLocale, $fetch)
    if (data) {
        i18n.setLocale(toLocale)
        i18n.setLocaleMessage(toLocale, data)
    }

    // if locale invalid (aka locale doesn't exist in your DB) -> redirect to home without locale prefix -> fallback to default locale in your DB
    if (!validLocale) {
        const correctPath = route.path.replace('/' + route.params.locale, '')
        if (route.path !== correctPath) {
            window && (window.location.href = useRequestURL().origin + correctPath)
        }
    }
})

in case you want to reload the app when switch locale, use this version of locale switcher ./components/locale-switcher-reload.vue

    // my pinia store
    const store  = useCommonStore()
    const route  = useRoute()
    const i18n   = useI18n()

    const getLocalLink = (localeCode: string) => {
        const origin          = useRequestURL().origin
        const localeParam     = route.params.locale
        // my channel have default locale config, so if current locale is default locale, remove locale code from url
        const isDefaultLocale = store.siteConfig.currentChannel.defaultLocale.code === localeCode
        let url               = ''
        if (localeParam) {
            url = origin + (route.path.replace(`/${localeParam}`, isDefaultLocale ? '' : `/${localeCode}`))
        } else {
            url = origin + (isDefaultLocale ? route.path : `/${localeCode}` + route.path)
        }
        if (url && url.slice(-1) === '/') {
            url = url.slice(0, -1)
        }
        return url
    }

    const switchLocale = async (e: any, code: string) => {
        e.preventDefault()
        if (i18n.locale.value === code) return
        // Solve page translation flicker problem by cloning the current locale messages and set it to the new locale
        // New locale messages will be fetched from the server and set to the new locale
        i18n.setLocaleMessage(code, cloneData(i18n.messages.value[i18n.locale.value]))
        i18n.setLocale(code) // set new locale & save to storage
        window && (window.location.href = getLocalLink(code))
    }

in case you want to keep current app state, use this version of locale switcher ./components/locale-switcher-replace.vue

    // my pinia store
    const store  = useCommonStore()
    const router = useRouter()
    const route  = useRoute()
    const i18n   = useI18n()

    const switchLocale = async (code: string) => {
        if (i18n.locale.value === code) return
        // my channel have default locale config, so if current locale is default locale, remove locale code from url
        const isDefaultLocale = store.siteConfig.currentChannel.defaultLocale.code === code
        const message         = await loadLocaleMessageFromApi(useRequestURL().origin, code, $fetch)
        i18n.setLocaleMessage(code, message)
        i18n.setLocale(code)
        await router.replace({
            name  : route.name,
            params: {
                locale: isDefaultLocale ? '' : code
            }
        })
    }

add more header to router configs, nuxt.config.ts - may not require

export default defineNuxtConfig({
...
routeRules: {
    ...
    '/*'     : {
        cache: {
            varies: ['accept-language', 'host', 'x-forwarded-host', 'x-channel', 'request-id', 'x-response-locale']
        }
    }
    ...
}
...
}

Fetch Wrapper, ./plugins/fetchData.ts - may not require

import type { FetchOptions } from 'ofetch'
import { v4 as uuidv4 } from 'uuid'
import psl from 'psl'

export const optHandle = (nuxtApp: any, setHeaderResponseLocale?: boolean): FetchOptions => {
    return {
        baseURL: '',
        onRequest({request, options, error}) {
            const xUrl: any      = useRequestURL()
            const i18n: any      = nuxtApp.$i18n
            const locale: string = i18n?.locale.value || ''

            if (locale) {
                setHeaderToRequestOptions(options, 'Accept-Language', locale)
                if (setHeaderResponseLocale) {
                    setHeaderToRequestOptions(options, 'x-response-locale', locale)
                }
            }

            let channel: string = 'www' // www is default channel
            if (xUrl) {
                try {
                    const parsed = psl.parse(xUrl.hostname || '')
                    channel      = parsed.error ? channel : parsed.subdomain || channel
                } catch (e) {
                    console.log(e)
                }
            }

            setHeaderToRequestOptions(options, 'request-id', uuidv4())
            setHeaderToRequestOptions(options, 'x-channel', channel)
            setHeaderToRequestOptions(options, 'x-forwarded-host', xUrl.hostname)
        },
        async onResponseError({response}) {
            if (response.status === 401) {
                await nuxtApp.runWithContext(() => navigateTo('/auth/login'))
            }
        }
    } as FetchOptions
}

export default defineNuxtPlugin((nuxtApp) => {
    const fetchData = $fetch.create(optHandle(nuxtApp))

    // Expose to useNuxtApp().$fetchData
    return {
        provide: {
            fetchData
        }
    }
})

Hope this help :)

[BobbieGoede]

Thanks for sharing your approach, I think this is better suited as a discussion rather than an issue, so I'm converting it.