Critical: Language routes are not properly created

[tonqa]

Version

@nuxtjs/i18n: 7.2.3 nuxt: 2.15.8

Nuxt configuration

• [x] Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

  i18n: {
    locales: [
      {
        code: "en",
        name: "English",
      },
      {
        code: "de",
        name: "Deutsch",
      },
    ],
    strategy: "prefix_except_default",
    defaultLocale: "en",
    vueI18n: {
      fallbackLocale: "en",
      messages: {
        en: {
          welcome: "Welcome",
        },
        de: {
          welcome: "Willkommen",
        },
      },
    },
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: "lang",
    },
  },

Steps to reproduce

• I imported the nuxt/i18n module to my running project and set it up like above.

• For all my pages only the index page works with /de

• All other pages run into an error (any route with /de/{route}):

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

• I had a look to the nuxt/router.js and it generated a strange route, if I delete that route it seems to work

What is Expected?

All old and new routes should work when opening them manually in my browser (this actually has been my first test)

What is actually happening?

For all my pages, only the default language can be accessed (not any route with /de)

[rchl]

Please prepare a repo that reproduces. I don't think this should be happening with default Nuxt settings at least.

[tonqa]

This is the pure setup with some basic libraries. Please feel free to clone. https://github.com/tonqa/nuxt-demo

[rchl]

You are adding custom route with * path:

  router: {
    base: "/",
    extendRoutes(routes, resolve) {
      routes.push({
        name: "custom",
        path: "*",
        component: resolve(__dirname, "layouts/error.vue"),
      });
    },
  },

You can change the path to /*.

[rchl]

Also, maybe it's just your example that is a simplification of the real issue but not sure what's the point of adding a "catch-all" route that shows the error as that should be the case by default.

[tonqa]

I see, I forgot about it. The reason is as follows: I have a dynamic page _post.vue, which has a validate function.

  validate({ params }) {
    // Must be a number
    return /^\d+$/.test(params.post);
  },

If the validation fails it should redirect to the 404 page. It's suggested here at the docs https://nuxtjs.org/docs/configuration-glossary/configuration-router/

It could also happen that there's a better way to do it. I will have a look. As a suggestion, why don't you ignore such custom catch-all routes in your logic?

[rchl]

why don't you ignore such custom catch-all routes in your logic?

That's not the main issue. The main issue in my eye is that the sortRoutes function from Nuxt doesn't work correctly in this case. The proper sorting should result in this route being last.

I've created Nuxt issue at https://github.com/nuxt/nuxt.js/issues/10630

[tonqa]

Thanks. you helped me a lot.