I face a problem on the framework Nuxt 3 using i18n (@nuxtjs/i18n: ^8.0.0-rc.5)
i18n seems to work perfectly except for the browser language detection.
The problem is that I enabled the detectBrowserLanguage in the i18n config file but it does not work as I expected. Do you have an idea of the root cause of my problem?
Please find my config file:
i18n.config.ts
export default defineI18nConfig(() => ({
legacy: false,
locales: [
{ code: 'en', iso: 'en-US' },
{ code: 'fr', iso: 'fr-FR' }
],
defaultLocale: 'en',
// strategy: 'no_prefix',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root',
// alwaysRedirect: true
},
messages: {
en: {
welcome: "Welcome",
},
fr: {
welcome: "Bienvenue",
}
}
}))
Note that the translations works fine, and also the dropdown to manually change the language work well.
Find the code below :
<template>
<div class="relative mr-4">
<button @click="toggle" @focusout="closeDropdown"
class="border-4 border-secondary bg-primary2 bg-opacity-80 hover:border-accent rounded-lg py-2 pl-4 pr-2 flex flex-row group gap-2">
<Icon :name="langFlag" size="2em" />
<Icon name="mdi:chevron-down" class="text-secondary group-hover:text-accent" size="2em" />
</button>
<div v-if="ddactive"
class="absolute top-14 right-0 bg-primary2 bg-opacity-80 flex flex-col rounded-lg z-40 overflow-hidden text-secondary">
<button
class="btnlang px-4 py-2 flex flex-row items-center border-4 border-b-2 border-secondary hover:border-accent hover:text-accent"
@click="changeLangTo('en')">
<Icon name="flag:gb-4x3" size="2em" />
<span class="pl-2">English</span>
</button>
<button
class="btnlang px-4 py-2 flex flex-row items-center border-4 border-t-2 border-secondary hover:border-accent hover:text-accent"
@click="changeLangTo('fr')">
<Icon name="flag:fr-4x3" size="2em" />
<span class="pl-2">Français</span>
</button>
</div>
</div>
</template>
<script setup>
const { locale, locales, setLocale } = useI18n()
const ddactive = ref(false)
const toggle = () => ddactive.value = !ddactive.value
const closeDropdown = (e) => {
if (!e.relatedTarget || !e.relatedTarget.className || !e.relatedTarget.className.includes("btnlang")) {
ddactive.value = false
}
}
const langFlag = ref('flag:gb-4x3')
const changeLangTo = (lang) => {
setLocale(lang)
switch (lang) {
case 'en':
langFlag.value = 'flag:gb-4x3'
break;
case 'fr':
langFlag.value = 'flag:fr-4x3'
break;
}
ddactive.value = false
}
onMounted(() => {
console.log(locale.value);
changeLangTo(locale.value);
})
</script>
Below a screenshot of my browser (Chrome) with locale "fr-FR" but the "console.log(locale.value);" of the code above still showing "en-US" :
I tried to modify the config file for example with the "alwaysRedirect: true" but it does not change the result.
EDIT:
I complete my code by adding the logs that I got by adding a debug="true" to the config file of the module @nuxtjs/i18n :
load $i18n type definition plugin for composition mode
isSSG false
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
useCookie on setup true
defaultLocale on setup
detectLocale: initialLocale - en-US
detectLocale: (ssg, callType, firstAccess) - normal setup true
detectBrowserLanguage: (ssg, callType, firstAccess) - normal setup true
detectBrowserLanguage: (path, strategy, alwaysRedirect, redirectOn, locale) - / prefix_except_default false root en-US
getLocaleCookie { useCookie: true, cookieKey: 'i18n_redirected', localeCodes: [] }
detectBrowserLanguage: cookieLocale undefined
getBrowserLocale accept-language { 'accept-language': 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7' }
getBrowserLocale ret
detectBrowserLanguage: browserLocale
detectBrowserLanguage: (matchedLocale, cookieLocale, localeFrom) - undefined navigator_or_header
detectBrowserLanguage: first finaleLocale (finaleLocale, cookieLocale, localeFrom) - undefined navigator_or_header
detectBrowserLanguage: vueI18nLocale en-US
detectLocale: detectBrowserLanguage (browserLocale, stat, reason, from) - false not_found_match undefined
detectLocale: finaleLocale first (finaleLocale, strategy) - prefix_except_default
detectLocale: finaleLocale second (finaleLocale, detectBrowserLanguage) - {
alwaysRedirect: false,
cookieCrossOrigin: false,
cookieDomain: null,
cookieKey: 'i18n_redirected',
cookieSecure: false,
fallbackLocale: '',
redirectOn: 'root',
useCookie: true
}
getLocaleCookie { useCookie: true, cookieKey: 'i18n_redirected', localeCodes: [] }
detectLocale: finalLocale last (finalLocale, defaultLocale) -
detectLocale: finalLocale -
first detect initial locale
final initial locale: en-US
locale-changing middleware {
fullPath: '/',
hash: '',
query: {},
name: 'index',
path: '/',
params: {},
matched: [
{
path: '/',
redirect: undefined,
name: 'index',
meta: {},
aliasOf: undefined,
beforeEnter: undefined,
props: [Object],
children: [],
instances: {},
leaveGuards: Set(0) {},
updateGuards: Set(0) {},
enterCallbacks: {},
components: [Object]
}
],
meta: {},
redirectedFrom: undefined,
href: '/'
} {
fullPath: '/',
path: '/',
query: {},
hash: '',
name: 'index',
params: {},
matched: [
{
path: '/',
redirect: undefined,
name: 'index',
meta: {},
aliasOf: undefined,
beforeEnter: undefined,
props: [Object],
children: [],
instances: {},
leaveGuards: Set(0) {},
updateGuards: Set(0) {},
enterCallbacks: {},
components: [Object]
}
],
meta: {},
redirectedFrom: undefined,
href: '/'
}
We can see that the browser locale seems somehow well detected "getBrowserLocale accept-language { 'accept-language': 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7' }" but the resulting locale is 'en-US' anyway.
1 week of trying to understand what's wrong when I just misreading the documentation! Anyway, I hope I can help someone else that could face this issue:
This block of config should be in the nuxt.config.ts file and not in the i18n.config.ts :
locales: [
{ code: 'en', iso: 'en-US' },
{ code: 'fr', iso: 'fr-FR' }
],
defaultLocale: 'en',
// strategy: 'no_prefix',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
redirectOn: 'root',
// alwaysRedirect: true
},