I18n-module: Detect browser language

[eddiesigner]

First of all, thanks for this module, is pretty useful! 👍

Now, it would be great if the module is able to detect the browser language and redirect to the user accordingly, so for example, if my browser has the english language enabled, I'd be redirected to '/en'.

I wrote my own middleware for that:

````js
export default function ({ isHMR, app, store, route, params, req, error, redirect }) {
if (isHMR) return

if (req) {
if (route.name) {
let locale = req.headers['accept-language'].split(',')[0].toLocaleLowerCase().substring(0, 2)

  if (locale === 'en') { // In my case I just care about English or German but of course that line should be a condition to detect if the locale is part of the locales array in the configuration
    app.i18n.locale = locale

    if (params && Object.keys(params).length === 0 && params.constructor === Object) {
      redirect(app.localePath(app.getRouteBaseName()))
    } else {
      redirect(app.localePath({name: app.getRouteBaseName(), params: params}))
    }
  }
}

}
}
````

But I think it would be better if this can be done by the module itself, maybe as an option in the configuration, something like detectBrowserLanguage: true

What do you think?

_{This question is available on Nuxt.js community (#c32)}

[manniL]

+1 for sharing this code! Kudos to you :pray:

[paulgv]

Awesome! Thank you @eddiesigner!
I've added this feature in v2.5.0, it's pretty much all your code with the addition of some cookie handling to prevent redirecting users every time they load a page if they chose another language.

[manniL]

@paulgv I'm using the implementation of @eddiesigner and I think that no more handling (like cookies) is needed. When the user is switching pages or languages, he won't get redirected to the language the middleware suggested first.

But it depends on how "restrictive" you want to be with setting a language.

[paulgv]

Hey @manniL
I feel like disabling the cookie check would result in excessive redirections for users that visit your app multiple times.
Although, I guess we could add an option that disables this check if it really isn't required in some setups.

[manniL]

@paulgv Sure, I see the benefits in reducing unwanted redirects for the user. On the other hand, using Accept-Language should almost always be correct about the users' preferred language. If not, he can still change it in its settings.

Anyway, there is this lodash thing now. See #39

[paulgv]

Just added option useRedirectCookie, you can set it to false to disable the cookie thing :)

[eddiesigner]

Thank you @paulgv!

Btw, the useRedirectCookie option is pretty useful. 😄

[timrijkse]

When setting detectBrowserLanguage to true I get the following error:

[vue-router] Route with name 'null-nl' does not exist

I tried debugging the error:
console.log('route:', route && route.name, app.getRouteBaseName(route.name))

Which results in:
route: index-en null

Any idea why app.getRouteBaseName(route.name) is null?

[cmty[bot]]

This feature-request has been implemented by @paulgv in release v2.5.0.

[amrshakya]

detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_lang_cookie'
},

i did set detectBrowserLanguage but it didn't work as it should.
like if i select german language i would expect site to be loaded in german language but, it still loads in english.

[Kerita]

Meet the same error like @amrshakya

[milescui]

Meet the same error like @amrshakya

[manniL]

Create a new issue then.