i18n: detectBrowserLanguage Parameter configuration does not work

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 detectBrowserLanguage working again.

@kazupon Сan you please explain how detectBrowserLanguage and defaultLocale should work at the same time? My browser language is ru, defaultLocale is en, language detection is enabled:

{
  strategy: 'prefix_except_default',
  defaultLocale: 'en',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    redirectOn: 'root',
  }
}

What I expect: when my first visit the https://localhost:3000, it will not find i18n_redirected cookie, than will automatically detect the ru language and redirect me to the https://localhost:3000/ru. The next time I visit the https://localhost:3000, it will leave me there, because it has already saved my language in cookies.

What I get: when I first go to the https://localhost:3000, he leaves me there and set i18n_redirected="en" in the cookies. It seems like detectBrowserLanguage is not working

Please try the latest edge channel version. I’ve recently fixed the redirection & routing bugs. I’ve installed and tried it on your repro. You would see that it is working correctly.

Unfortunately I can’t confirm 🙁 Do you have a link to a working reproduction?

Thanks!

Hi, is there any development on this?

We’re using the i18n plugin in our project and we’re really loving it, thanks for all the great work! But the issues described by the other devs are currently giving us a real headache.

Thanks in advance!🙏 Iven

I’m experiencing the same oddity. Here’s a CodeSandbox reproduction: https://codesandbox.io/p/sandbox/nuxt-3-nuxtjs-i18n-redirect-issue-bun8ol

No matter what combination of detectBrowserLanguage, useCookie, alwaysRedirect and redirectOn, no redirection happens when visiting / or /about, and no cookie is created.

Versions are "nuxt": "^3.1.1" and "@nuxtjs/i18n": "^8.0.0-beta.8".

Not sure if that’s an actual bug, or just a configuration misunderstanding on my part. I read the docs multiple times but cannot figure out how to always redirect users visiting routes without locale prefixes.

Anyone knows how to do that? Is that even possible?

ps: Not sure I understand @kazupon’s “for reload in stackbliz, we need to reload with stackblitz URL address hitting, not reload button” comment 🤔

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;
}

route.matched[0]?.meta.nuxtI18n is undefined. As a result detectRedirect return an empty string. And the debug log provided by @ChrisGV04 confirms the same problem.

redirectPath on locale-changing middleware <empty string> i18n.mjs:363 .

Maybe we have a way to configure route metadata? As a workaround, adding this code to pages will solve the problem

<script setup lang="ts">
definePageMeta({
  layout: 'default',
  nuxtI18n: {
    en: true,
    uk: true,
  },
});
</script>

But I don’t think it should be done manually.

Same issue for me, no redirect happening at all on latest version beta.12

the below, I’ve modiefied your repro for detectBrowserLanguage and no_prefix strategy. https://stackblitz.com/edit/github-agwtyv-jfubic?file=pages%2Findex.vue,nuxt.config.ts,app.vue

Nothing will happen if the strategy is changed to prefix_except_default there - no redirect. Is this expected behaviour? How can we make i work?

ok, so for me it is still not working. Don’t understand what i am doing wrong. My default language of the app is ‘de’ but my browser language of my browser settings is ‘en’. So i would expect that when first visiting the page that it recognizes my ‘en’ browser language and sets this… but it is always loading with ‘de’. And cookie set with ‘de’. When i then change languages within the dropdown und reload page… the cookie got the language which was selected in dropdown… so do be honest i don’t understand that behaviour. My expectation would have been, page gets loaded in detected browser language ‘en’.

Here is my stackblitz reproduction: https://stackblitz.com/edit/nuxt-starter-d4qefp @kazupon please have a look. I am desperate on this.

The ‘prefix_except_default’ and ‘detectBrowserLanguage’ features are still not working correctly.

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 https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/plugins/i18n.ts#L97

and passes that locale to createI18n

https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/plugins/i18n.ts#LL126C16-L126C26

then inside the router middleware detectLocale is called again https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/plugins/i18n.ts#L406

which in turn calls detectBrowserLocale https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/utils.ts#L235

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 switchLocalePath , respecting redirectOn.

Edit: looks like I can get it to work with the following changes:

1. Don’t pass locale to createI18n here https://github.com/nuxt-modules/i18n/blob/9f9fd2ee9608f02fbd69b1e054d2c32e620ffeb1/src/runtime/plugins/i18n.ts#LL126C16-L126C26 This can also be done via a plugin

 export default defineNuxtPlugin(nuxtApp => {
   const i18n = nuxtApp.vueApp._context.provides[nuxtApp.vueApp.__VUE_I18N_SYMBOL__].global
  i18n.locale.value = undefined
})

1. Manually set the i18n_redirected cookie when user clicks on a link with switchLocalePath
2. Explicitly set nuxtI18n in definePageMeta of every page as described in the previous comment

Same issue here. Redirect always redirects to default locale, not the browser locale. I use the prefix strategy. Minimal example can be found here: https://github.com/dword-design/demo-nuxt3-i18n-redirect-always-default The same project works with Nuxt 2

@quentint Sorry for my late reply. Thank you for your reproduction!

I’ve checked you reproduction.

Please try the latest edge channel version. I’ve recently fixed the redirection & routing bugs. I’ve installed and tried it on your repro. You would see that it is working correctly.

Same issue. Seems to work on the root page (“/”) or with strategy no_prefix, but NOT on sub pages with prefix_and_default, even though redirectOn is set to “all” or “no prefix”. Somehow detectBrowserLanguage gets called twice (once through the plugin init and once in the middleware), and the second time it just returns no language because both checks ( https://github.com/nuxt-modules/i18n/blob/next/src/runtime/internal.ts#L407 and https://github.com/nuxt-modules/i18n/blob/next/src/runtime/internal.ts#L411) are false.

Reproduction: https://stackblitz.com/edit/github-agwtyv-1bsafu

I have the same issue as described in the previous comment. However, when I switch from strategy: ‘prefix’ to strategy: ‘no_prefix’, then it works.