nuxt/i18n with optional route params

[toxic sigil]

I have a page with optional param my-page/edit/[[id]] and I am using @nuxtjs/i18n with pages property like this:

'my-page-edit-id': {
    es: '/my-page/editar',
    en: '/my-page/edit',
}

when using navigation to go to a page with id like this:

    router.push(
      localePath({
        name: 'my-page-edit-id',
        params: { id },
      }),
    );

I get a warning

Discarded invalid param(s) "id" when navigating

How do I configure the pages to recognize optional params

[marble quiver]

Hi @toxic sigil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The knowledge sources don’t mention @nuxtjs/i18n’s behavior with optional params ([[id]]) in the pages config, so I can’t give a documented, guaranteed‑correct i18n‑specific solution.

What is documented is how Nuxt generates and names routes for dynamic and optional params:

• pages/my-page/edit/[[id]].vue will generate a route with an optional id param. [Dynamic routes]
• The route name will be derived from the path segments (e.g. my-page-edit-id is consistent with Nuxt’s naming rules). [Routing pages]

Your warning:

Discarded invalid param(s) "id" when navigating

comes from vue-router when you pass a param that doesn’t exist in the route’s path. That means that, from the router’s point of view, the localized path you configured for that route does not contain :id, so the id param is considered invalid.

Given the lack of explicit i18n docs in the sources, the only configuration that is clearly compatible with how Nuxt/vue-router work is:

• Make sure the localized path includes the dynamic segment when you want to pass id:

// nuxt.config
i18n: {
  // ...
  customRoutes: 'config',
  pages: {
    'my-page-edit-id': {
      en: '/my-page/edit/[id]',    // has :id
      es: '/my-page/editar/[id]',  // has :id
    },
  },
}

Then:

router.push(
  localePath({
    name: 'my-page-edit-id',
    params: { id }, // now matches :id in the path
  }),
)

This matches how dynamic routes are defined in Nuxt ([id] → :id), so vue-router will accept the param. [Dynamic routes]

What’s not covered in the docs is a way to express “optional” in the pages i18n config (e.g. something like /my-page/edit and /my-page/edit/[id] under the same key). Because of that missing information, I can’t reliably tell you how to keep the param optional at the i18n‑config level without hitting that warning.

So, based on the available docs:

• To avoid the warning when passing id, configure the localized paths with [id] so the router knows about that param.
• If you truly need the param to be optional, the knowledge sources don’t describe a supported @nuxtjs/i18n configuration for that case, so any workaround beyond this would be speculative.

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: