SPA - default to browser language

[mapeal2]

Hi,

Thanks for this awesome module, first of all. I'm developing a pure SPA with nuxt and I'm trying to implement nuxt-i18n for my project. Everything works well except for the fact that, when I enter the root URL for my application, the locale doesn't default to the current browser language. I've read the browser language detection in the doc, but I was wondering if this only applies to universal applications and whether this could be somehow adapted to pure SPAs.

Thanks in advance.

_{This question is available on Nuxt community (#c96)}

[ghost]

This issue as been imported as question since it does not respect nuxt-i18n issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt-i18n/issues/c96.

[paulgv]

Hi @mapeal2 !
Browser language detection should now work in v4.1.0 :)

[ghost]

This feature-request has been implemented by @paulgv in release v4.1.0.

[mapeal2]

Hi @paulgv ,

That was my understanding, but couldn't make it work. I console logged "req" parameter in middleware.js and it's always undefined, and that's why the logic doesn't go into the browser detection block. Is there any circumstance that could make req be undefined? I'm missing something fundamental here...

Thanks in advance.

[paulgv]

@mapeal2 sorry, I meant that I just implemented the change in the module, it did not work before but it should work if you upgrade to v4.1.0 :)

[mapeal2]

Hi @paulgv ,

My fault, I had v4.0.2 and didn't realize that this functionality was available in v4.1.0.

I've tested this now and I've detected what I think could be an issue, from my humble point of view. Given 2 locales ('en', 'fr'), default locale is 'en' and the preferred browser language is 'fr', with the 'prefix_except_default' option, the steps to reproduce it would be:

1. Visit home page '/' --> browser language is detected and redirected to '/fr', which is correct.
2. Close the browser.
3. Open a new browser and enter the home page ('/') again --> 'en' locale is chosen, ignoring cookie.

I would expect that, when opening the home page again, the application would be redirected to '/fr' instead of staying in '/'.

Please confirm this is expected behaviour, if you'd be so kind.

Regards.

[mapeal2]

Hi @paulgv ,

Just to clarify what I'm looking for, I created a plugin to implement my expected behaviour. First, I set detectBrowserLanguage: false not to interfere with the new logic, and rather perform the actions in the mounted hook instead of doing it in the middleware, which could be less efficient (correct me if I'm wrong). Then I implemented this logic in the new plugin:

import extend from '@/utils/extend_i18n'
import Cookies from 'js-cookie'

const cookieKey = 'my_i18n_locale'

export default async function ({ app }) {
	extend(app, {
		mounted() {
			if (!Cookies.get(cookieKey)){
			  let navigatorLocale = navigator.language.toLocaleLowerCase().substring(0, 2)
			  let browserLocale = app.i18n.locales.find(locale => locale.code == navigatorLocale)

			  if (browserLocale){
			    app.i18n.locale = browserLocale.code
			  } else {
			    app.i18n.locale = app.i18n.defaultLocale
			  }

			  const date = new Date()
			  Cookies.set(cookieKey, app.i18n.locale, {
			    expires: new Date(date.setDate(date.getDate() + 365))
			  })

			} else {
				app.i18n.locale = Cookies.get(cookieKey)
			}
			
			this.$router.replace(this.switchLocalePath(Cookies.get(cookieKey)))
		},
	}),
	app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
		const date = new Date()
		Cookies.set(cookieKey, newLocale, {
			expires: new Date(date.setDate(date.getDate() + 365))
		})		
	}	
}

This way, whenever I enter '/', it always gets redirected to what is set in the cookie, except for the first time, in which the browser language is taken into account.

Hope this clarifies my point of view.

Thanks and regards.

[mapeal2]

Hi @paulgv ,

Could then this be considered as an issue?

Regards.

[mapeal2]

Hi,

Could you please take a look at the scenario I pointed out and let me know if this is something that could be incorporated/improved in future releases?

Thanks in advance.

[paulgv]

Hi @mapeal2 sorry for the delay.
The scenario you described does look like something that should be taken into account and fixed in a future release, I'll open a bug report for this.

[edit] Bug report opened: https://cmty.app/nuxt/nuxt-i18n/issues/c116