detectBrowserLanguage Parameter configuration does not work #1632
Comments
|
Fill out all the requested information including specifying versions and providing reproduction. |
|
Hello, having the same issue where it seems that the browser language is not detected by the pluging and keeps on going for the defaultLocale config, It also applies to the static deployment. |
|
Hello, I'm also experiencing the same issues as the above comments. It always goes back to the default locale rather than what is detected. I would have thought if the accept language detects the locale (and redirect is on) it would go to that Thank you |
|
When using |
|
I'm using Nuxt 3.0.0 and @nuxtjs/i18n 8.0.0-beta.6 The config I'm using is the following: @rchl In my case is a brand new nuxt project and @nuxt/i18n is the only module included. |
|
I'm not up-to-date on what Nuxt 3 version supports. @kazupon will probably respond when he has some time. |
|
Can confirm this is not working. // nuxt.config.ts:
modules: [
[
"@nuxtjs/i18n",
{
defaultLocale: "en",
detectBrowserLanguage: {
useCookie: true,
alwaysRedirect: true,
cookieKey: "i18n_redirected",
cookieCrossOrigin: true,
redirectOn: "root", // recommended
},
vueI18n: {
strategy: "no_prefix",
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: {
en: {
welcome: "Welcome",
},
de: {
welcome: "Willkommen",
},
},
},
},
];
],The app defaults to |
|
Still not working - any update? |
|
i can confirm i am experiencing the same issue on a brand new nuxt 3 project, @nuxtjs/i18n just added and used the recommended configuration for browser language detection with no effect. |
|
I appreciate your feedback. Please provide a github repo or stackbliz 🙏 |
|
@kazupon Here is a minimal reproduction.
|
|
@madebyfabian I realized two things from your reporduction code.
when we are using nuxtjs/i18n routing, we must always configure docs saying:
If we would change the cookie when you change the locale, we must use the nuxtjs/i18n API, docs saying at the below, I've modiefied your repro for |
|
@kazupon Thank you very much for explaining! Maybe I haven't read the docs correctly. For somebody who never used this module in nuxt 2, it was a bit confusing to get started. I tried to implement your corrections from the repro in my current project and it works perfectly 😊.
Though for some reason it does not work in stackblitz, but this could have many reasons, e.g. due to how the preview of stackblitz is crossorigin. |
|
ok, so for me it is still not working. Don't understand what i am doing wrong. Here is my stackblitz reproduction: https://stackblitz.com/edit/nuxt-starter-d4qefp @kazupon please have a look. I am desperate on this. |
|
when i print some console log on the onLanguageSwitched callback i can see that it switches at start from en to de.. so somehow it was able to recognize my language is 'en' but nevertheless decides to switch to default locale 'de'. |
|
@madebyfabian
We need to reload with stackblitz URL address hitting, not reload button |
|
@awacode21 |
|
@kazupon i am already hitting the stackblitz url again instead of using the reload button but it behaves as i am describing it. Strange that for your browser it looks fine. i wonder what the difference is, as it is for me, clearly not working. Will try how it behaves with different browsers. Which browser are you using? I am using latest chrome on mac. |
|
no matter how often i read the documentation and no matter how often i do it exactly how it is documented. it simply does not work |
|
i checked for chrome, safari, firefox, opera... same behaviour on all browsers |
|
what i am also experiencing is.. after it already failed on first entry when no cookie was available to choose browser language instead of default language and set the cookie with the right value....... when i then change manually change to 'en'. And hit the stackblitz url again..... it shows englisch, but has hydration mismatch because on server it was rendered in german and on client it was rendered in englisch... so whatever is going on here, i think with this language detection there are some problems. i've already stripped complete logic out from my project to a simple stackblitz but still dealing with the issues. |
|
Hmm... I'm using latest chrome and macos tool. |
|
@kazupon Could you share a stackblitz of the working version? |
|
I have same problem. Debug log: UPD: Line 386 in e93ce7b And here interceptor takes wrong url according to my Debug log: Line 426 in e93ce7b |
|
@quentint I’ve checked you reproduction. Please try the latest edge channel version. |
Does this mean that redirecting the / to a language route (/en for example) now also works on static websites? Or do you still need to use nginx/apache/caddy to have that redirect? Thanks for the work @kazupon |
Unfortunately I can't confirm 🙁 Thanks! |
|
Redirection is now working 👍, but cookie is not created 🤔 |
Nothing will happen if the strategy is changed to |
|
Same issue here. Redirect always redirects to default locale, not the browser locale. I use the |
|
Same issue here. The default language of my Nuxt 3.3.1 app is "es" and it also supports "en", but If I use a browser with English, it does detect it on the logs but it doesn't redirect me to My configi18n: {
lazy: true,
langDir: 'lang',
defaultLocale: 'es',
locales: [
{ code: 'es', file: 'es.json' },
{ code: 'en', file: 'en.json' },
],
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n',
redirectOn: 'root',
},
vueI18n: {
legacy: false,
},
},Logs |
|
Hey @kazupon have you been able to work on this one? It's the only non-working feature I have at the moment, would love to see |
|
Same issue for me, no redirect happening at all on latest version beta.12 |
|
Same for me. After debugging I found out that the locale is actually set according to the browser language, but the redirects don't work. In my case it is related to this check function isI18nRouteDefined(route) {
const i18nLocales = route.matched[0]?.meta.nuxtI18n;
return i18nLocales ? Object.keys(i18nLocales).length > 0 : false;
}
Maybe we have a way to configure route metadata? <script setup lang="ts">
definePageMeta({
layout: 'default',
nuxtI18n: {
en: true,
uk: true,
},
});
</script>But I don't think it should be done manually. |
|
I'm trying to get this feature to work with strategy: "prefix_except_default" and detectBrowserLanguage.redirectOn "no prefix" I want the redirect to happen based on the user browser's language when they visit for the first time if they visit a no-prefix version of the website (default locale), but still allow them to change to other locales, including the default one. What ends up happening is, unless I set alwaysRedirect, the redirect doesn't happen. And if I do set alwaysRedirect, then the I can't change the language to the default one, because it will redirect me back to the detected language. Here's the reproduction: https://stackblitz.com/edit/github-vklszm?file=app.vue I stepped through the code and it just seems completely broken to me. detectLocale called here detects the correct locale i18n/src/runtime/plugins/i18n.ts Line 97 in 9f9fd2e and passes that locale to createI18n then inside the router middleware detectLocale is called again i18n/src/runtime/plugins/i18n.ts Line 406 in 9f9fd2e which in turn calls detectBrowserLocale Line 235 in 9f9fd2e which, again, detects the locale correctly, but because now the vuei18n locale is set, it returns no locale https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/internal.ts#LL428C27-L428C41 which then changes the locale back to the default one. What was the intended behavior here? I don't see how setting the detected locale in createI18n and then checking against that locale to decide if the redirect should happen or not could possibly work. I think a saner approach would be to redirect, unless the locale was explicitly changed by the user with Edit: looks like I can get it to work with the following changes:
export default defineNuxtPlugin(nuxtApp => {
const i18n = nuxtApp.vueApp._context.provides[nuxtApp.vueApp.__VUE_I18N_SYMBOL__].global
i18n.locale.value = undefined
})
|
kazupon
added
❗ p4-important
|
still facing all those same issues to this day! :( |
|
Facing the same issue |
|
The 'prefix_except_default' and 'detectBrowserLanguage' features are still not working correctly. |
|
I'm facing the same issue, the redirection is made with 301 code, that means when the user open "/" on the first time it redirects to "/${default_lang}" permanently then the browser will cache this redirection for ever. the redirection should be done with 302 instead to fix this issue |
|
I'd like to bring attention to the fact that the 'prefix_except_default' and 'detectBrowserLanguage' features are still not functioning as expected. Despite the reported issues, the problem persists in the latest version. I've noticed that the issue was marked as closed. However, I can confirm that the problem persists on my end. Could you please provide additional insights or reopen the issue for further investigation? @kazupon, your expertise on this matter would be greatly appreciated. Could you shed some light on the status of this issue and whether there are any plans for resolution? |
|
@gnidustotalus Locking this issue to prevent notification noise for the participants in here🙏 |
and others
Version
@nuxtjs/i18n:^8.0.0-beta.3
nuxt:3.0.0-rc.11
Nuxt configuration
Please change to
[x]if relevant for this issue:nuxt generate)@nuxtjs/i18n configuration
Reproduction Link
Steps to reproduce
What is Expected?
When I open the main site link in a browser in a different language, should he switch to the site in the corresponding language?
Is the cookie set to the corresponding language code?
What is actually happening?
They don't seem to be working properly
The text was updated successfully, but these errors were encountered: