No language redirect with dev with `prefix` strategy in 'spa' mode

Version

nuxt-i18n: 6.9.2 nuxt: 2.0.0

Reproduction Link

https://github.com/dokterbob/i18nuxt-redirect-bug

Steps to reproduce

1. Clean nuxt project with i18-nuxt configured with strategy set to `prefix’ as per documentation (refer to reproduction link)
2. Run dev server with npm run dev
3. Open http://localhost:3000/

What is Expected?

A redirect to a language prefix (/en/ or /pt/).

What is actually happening?

Page not found: “This page could not be found”

Notes

1. The following settings are sufficient to replicate the problem:

  modules: [
    [
      'nuxt-i18n',
      {
        locales: ['en', 'pt'],
        defaultLocale: 'en',
        strategy: 'prefix',
        vueI18n: {
          fallbackLocale: 'en'
        }
      }
    ]
  ],

1. The following settings have not shown to solve the problem:

        detectBrowserLanguage: {
          // This doesn't make a difference
          useCookie: false,
          alwaysRedirect: true
        },

1. The problem also occurs in a production environment with npm run build && npm run start

2. When using rootRedirect, the browser is redirected to the unprefixed route.

3. When requesting a route different from the default (e.g. /about/) redirection is also not performed.

4. Great care has been taken that browser cookies have been cleared in the tests above.

[rchl]

Relevant Nuxt issue: https://github.com/nuxt/nuxt.js/issues/4491

I will try to address the Nuxt issue (with a workaround) and the inconsistency in nuxt-i18n handling at the same time.

[Bigdragon13th]

I also having this issue, but in a weird way. So I think I’ll share my issue, in case it might help fixing this.

I created a new installation of Nuxt and Nuxt-i18n, got the following version: nuxt: 2.12.2 nuxt-i18n: 6.9.3

My browser locale is en-us. My Nuxt mode setting is universal.

This is my nuxt-i18n settings:

i18n: {
  locales: [
    {
      code: 'en',
      name: 'English',
      file: 'en.json',
    },
    {
      code: 'th',
      name: 'ภาษาไทย',
      file: 'th.json',
    },
  ],
  defaultLocale: 'th',
  strategy: 'prefix',
  lazy: true,
  langDir: 'locales/',
  detectBrowserLanguage: {
    useCookie: true,
    alwaysRedirect: true,
  },
},

• Now, when I try to access http://localhost:3000/, it redirect me to http://localhost:3000/en (I assume it’s because of my browser’s language). Which is expected. I also try remove /en and hit enter again, it’s still works fine.
• The weird issue came after I switch the language to th (by using switchLocalePath(locale.code)). It redirect me to http://localhost:3000/th, after I remove /th part, I got 404.
• A more weirder issue. After trying to figure out what’s wrong with my config, I’ve tried changed my defaultLocale to en, now everything broke. Accessing http://localhost:3000/ just throw me 404, it’s not redirect anymore.

My workaround right now is, completely disable detectBrowserLanguage and force rootRedirect. It’s not ideal, but at least it seems working.

rootRedirect: 'th',
detectBrowserLanguage: false,