I18n-module: Allow for alternative language detection

[andrade1379]

What problem does this feature solve?

Currently, Nuxt-i18n has an option to allow for browser detection which is great but not always accurate. It would be nice to allow for an alternative source to detect users language preference.

What does the proposed changes look like?

I'm proposing an option to allow for an alternative provider to detect a users language needs. For example, a geolocation service that provides an API that returns geodata.

In this particular instance my app is in SPA mode.

nuxt.config.js:

detectBrowserLanguage: {
            api: "https://someAPI.com/location", // Just as an example of how this can be checked
            useCookie: true,
            cookieKey: 'i18n_redirected'
        },

middleware.js:

if (detectBrowserLanguage) {
let browserLocale

    if (useCookie && (browserLocale = getCookie()) && browserLocale !== 1 && browserLocale !== '1') {
    } else if (isSpa && apiOption) {
        browserLocale = store.state.geoData.country.toLowerCase();

Something like that. I've made these edits to middleware.js and it's working for me. But I'm also seeing that an entry is made to the history then I'm redirected to the proper prefixed page.

What I would expect to happen for example if someone comes to '/' that only one entry is made to the history. There needs to be some type of check if route is the same then no entry is made. Maybe this is something that needs to happen as a plugin?

_{This feature request is available on Nuxt community (#c196)}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rchl]

I'd say it would be too heavy to do it for every page load request but when used with conjunction with cookie storage, it would be OK and useful. Maybe let's reopen this?

[LevGlushchenko]

Yeap, it woul'd be nice

[nachogarcia]

I currently have this exact scenario in a project. Let me know if I can help.

[mithom]

@andrade1379 you can do this easily yourself in an SPA.
just make an async middleware that takes app out of the context, fetches your API or whatever method you would like to use, and then use

export default async function ({ isHMR, app, store}) {
  const defaultLocale = app.i18n.fallbackLocale
  // If middleware is called from hot module replacement, ignore it
  if (isHMR) { return }
  // Get locale from params
  const locale = app.i18n.locale || defaultLocale
  const fetchedLocale = 'en' //fetch your locale using any method (example in comments)
  // await store.restored //<--do this if you use some kind of persistent vuex in electron for example
  // const fetchedLocale = store.state.i18n.locale
  if (fetchedLocale !== locale.code) {
    await app.i18n.setLocale(fetchedLocale)
  }
}

as @rchl has already mentioned, this is going to be quiet slow for an api call, so combine this with checking a cookie to see if you need to check the api to begin with

EDIT: don't forget to disable the auto-redirect when you implement your custom redirect

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.