I18n-module: How to redirect the index / after setting noPrefixDefaultLocale

[NadhirBoukhenifra]

Hello,
i have problem:

1. i set noPrefixDefaultLocale to false
   in the description:
   _By default, paths generated for the default language don't contain a locale prefix, set this option to false to disable this behavior_

2. so the generated routes like this, good:

[
  {
    path: "/en/",
    component: _3237362a,
    name: "index-en"
  },
  {
    path: "/fr/",
    component: _3237362a,
    name: "index-fr"
  }
]

1. then when starting the app, do not redirect to index it shows 404 page not found error!!!
   http://localhost:port/ -> error
   http://localhost:port/en -> index page with English

2. what i want is some setting that change the default language after setting noPrefixDefaultLocale: false
   or add another auto generated route like this of the default language:

[
  {
    path: "/",
    component: _3237362a,
    name: "index-en" // the default language!!! or redirectRootToLocale content!!
  },
  {
    path: "/en/",
    component: _3237362a,
    name: "index-en"
  },
  {
    path: "/fr/",
    component: _3237362a,
    name: "index-fr"
  }
]

1. i think this : redirectRootToLocale: 'en' must work every time.
   the problem as description said:
   _Specify a locale to which the user should be redirected when visiting root URL (/), doesn't do anything if noPrefixDefaultLocale is enabled_

so make redirectRootToLocale work every time to solve this as i think!!

and thank you :).

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

[MitsuhaKitsune]

Same problem here, the route generation it's OK, show 404 if I tried to access without language on url, I added this options from docs to detect and autoredirect to browser language:
detectBrowserLanguage: true, redirectCookieKey: 'redirected', useRedirectCookie: true
But don't work, still showing 404 without redirect

[paulgv]

Hey guys! Thanks for reporting this, the option's handling was a bit restrictive indeed, you should be able to achieve what you want with nuxt-i18n@^2.8.0 :)

[MitsuhaKitsune]

I test it now on clean browser instance with [email protected], but on my case still showing 404 without redirect to language.

This is my module configuration:

    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English',
          langFile: 'en.json'
        },
        {
          code: 'es',
          iso: 'es-ES',
          name: 'Español',
          langFile: 'es.json'
        }
      ],
      defaultLocale: 'en',
      noPrefixDefaultLocale: false,
      loadLanguagesAsync: true,
      langDir: 'locales/',
      detectBrowserLanguage: true,
      redirectCookieKey: 'redirected',
      useRedirectCookie: true
    }],

This issue are present too when I try to access to one of my pages without language code, not only with the index, for example, if I try to access to http://localhost:3000/en/news it works as expected, same if I try with 'es' but if I try to access to http://localhost:3000/news show 404 instead redirect to http://localhost:3000/en/news or http://localhost:3000/es/news

[paulgv]

Woops sorry @MitsuhaKitsune, I read your comment too fast and assumed your problem was the same as @NadhirBoukhenifra 😅
Could you give v2.8.1 a try? It should cover your use case.

[MitsuhaKitsune]

Don't worry, I think too that the @NadhirBoukhenifra issue are the same than mine.

Tested [email protected] on clean browser instance, now the root path are redirected as expected, very nice job ^^

But the other routes still having a little issue, now when I try to access to http://localhost:3000/news don't show the 404 error but I get redirected to http://localhost:3000/en instead http://localhost:3000/en/news

I investigate about this little issue, when I access with the url, the route object have this data:

name: null,
meta: [],
path: '/news',
hash: '',
query: {},
params: {},
fullPath: '/news',
matched: []

Then the line:
https://github.com/nuxt-community/nuxt-i18n/blob/38325e2a0b49b2abe25a6abaed663fa3aa7f27f4/lib/templates/i18n.routing.middleware.js#L37
Always result on 'index' because the route name are null, with noPrefixDefaultLocale: false the route path don't match with any generated routes because all are prefixed, in this case, news (without language slug) don't exist, only news-en and news-es

I start trying things editing my node_modules/nuxt-i18n/lib/templates/i18n.routing.middleware.js with the app running to make some test, finally I get it working the redirection on all pages extending the // Redirect part with this:

      // Redirect
      let routeName = ''

      if (route.path == '/')
        routeName = 'index';

      if (!<%= options.noPrefixDefaultLocale %>)
      {
        if (!route.name && app.router.match(`/${defaultLocale}${route.path}`).name)
          route = app.router.match(`/${defaultLocale}${route.path}`)
      }

      routeName = app.getRouteBaseName(route.name);

      if (browserLocale !== app.i18n.locale && localeCodes.indexOf(browserLocale) !== -1) {
        app.i18n.locale = browserLocale
        redirect(app.localePath(Object.assign({}, route , {
          name: routeName
        })))
      }

Unafortunally I'm new on node.js and I don't know how modules work for now, when I close the app and start again can't start because say that defaultLocale and router isn't defined.

I don't think that the code are clean too, just I say to you because I think that can help you to make a better implementation.

[paulgv]

Thanks @MitsuhaKitsune, I like your approach and I'll implement it asap :)
I'm planning on refactoring the module's code sometime to make it more scalable but I'm kinda waiting on Nuxt 2.0 to be released as it will bring better support for ES6 which should facilitate modules' development.

[MitsuhaKitsune]

I have more things to make nuxt better, but I think this should implemented on nuxt core instead i18n, actually nuxt have a duplicated content problem on his routes too, for example:

/news/ and /news both are valid and the same route, but for SEO it's a big problem, should be more strict and generate only one mode, for example if it's a folder generate only a /foldername/ and don't allow access without final slash /foldername (instead access make a 301 redirection to /foldername/ or show 404, both are valid for SEO) and for single vue files make only the /filename as valid without the final slash.

I gona try to learn about modules and try to send PR to you and nuxt to help with this things, I read the documentation on https://nuxtjs.org/api/configuration-modules but I still don't know how I can debug the module startup, I tried to put some console.log('test') but don't show anything on console.

[paulgv]

If you want to work on the module's code, I'd recommend you clone the source into your project, in a directory that's being watched in dev mode. You can change your nuxt.config.js to use the local module instead of the one in node_modules/, ie:

// nuxt.config.js

module.exports = {
  modules: ['./modules/nuxt-i18n', {}]
}

[cmty[bot]]

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