[V2.2.1] Localized url's are missing '/' at end, defaultLocale is loaded on full refresh

[FransTwisk]

It seems that since V2.2.1 there is no slash added anymore to the localized route, which is a nice feature (because you want to be able to handle '/nl' and '/nl/' , but this doesn't work on initial load: e.g.: it loses the selected language on a full page refresh.

For example: http://example.com/ would load in the default locale ('en'). Switching to another language (e.g. 'nl') changes the route to http://example.com/nl and shows the localized content. However, if I do a full page refresh the route stays on http://example.com/nl but the content is rendered in the default locale again, instead of 'nl'.

It would be nice if both '/nl' and '/nl/' are supported or if '/nl' would always (try to) redirect to '/nl/'

Feature request:
Maybe I should create another issue for this, but I would like to be able to redirect users to a language found in the navigator.languages on initial load. I have a working workaround, also saving the last selected locale in localStorage (so a visitor can still overwrite the default behaviour of redirecting to a matching locale from navigator.languages) and then checking if a returning visitor on the index has a previous language set, but it's not perfect. Any ideas about this?

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

[paulgv]

@FransTwisk thanks for bringing up this issue, it should be fixed in v2.2.4!
The /xx/ format is currently dropped in favor of /xx which seems more standard, if you think both formats should be supported, maybe we should add it as an option?
Concerning your redirect issue, I feel like the best way to do this would be to have your own plugin to override nuxt-i18n's behavior.

[FransTwisk]

Thanks for the quick fix! Works perfectly now, with and without the slash at the end. I think this behaviour is fine, just wanted to make sure that if a user explicitly also adds a slash at the end that the right page + language also shows up.

Concerning the auto-redirect: I'm afraid my Vue skills lack the ability to write a plugin myself, but I'll investigate. I think the only thing I need it so extend the "switchLocalePath" function to save the chosen language to localStorage. Or is there another way to programmatically switch the language through a JS function (not a route).

[joakimglaving]

@FransTwisk let me know how the investigation goes :) I'm also interested in this feature but lack the skills to do it myself.

[FransTwisk]

I currently use 'locale' npm packages & cookies nuxt.js module to check default locale or if a cookie is set with the locale and then redirect. This can be improved by also checking of the language exists, and link it with the i18n config, but it's a start!

'~/plugins/set-locale-onload.js'

export default ({ req, app, route, redirect }) => {
  if (process.server && route.path === '/') {
    let locale = app.i18n.locale

    var GetLocale = require('locale')
    const locales = new GetLocale.Locales(req.headers['accept-language'])
    const supported = new GetLocale.Locales(['en', 'nl'], app.i18n.locale)

    const localeCookie = app.$cookies.get('locale')
    const localeBrowser = locales.best(supported).code

    locale = localeCookie || localeBrowser

    if (locale && locale !== app.i18n.locale) {
      redirect('/' + locale)
      return
    }
  }

  app.router.afterEach((to, from, next) => {
    let locale = app.i18n.locale
    app.$cookies.set('locale', locale, {
      path: '/',
      maxAge: 60 * 60 * 24 * 7
    })
  })
}

[ghost]

This question has been resolved by @paulgv, see answer.