How to navigate subpages with nuxt-link and i8n?

Question

I can obviously call simple pages like so: <nuxt-link :to="localePath('about')"> = http://127.0.0.1:3000/about-us

But calling <nuxt-link :to="localePath('addItem/food')"> return me to root. So does <nuxt-link :to="localePath('food')"> when I'm on the addItem page. ( http://127.0.0.1:3000/ )

If I simply put <nuxt-link :to="localePath('addItem')"> I'm taken to addItem/index, but it's the only thing that work.

How can I properly navigate to addItem/food?

Pages:

pages: {
        'addItem/index': {
          en: '/add-item',
          fr: '/ajout-item',
        },
        'addItem/food': {
          en: '/add-item/food',
          fr: '/ajout-item/alimentation',
        },
        'addItem/pharma': {
          en: '/add-item/pharmaceuticals',
          fr: '/ajout-item/medicaments',
        },
        about: {
          en: '/about-us', // -> accessible at /about-us (no prefix since it's the default locale)
          fr: '/a-propos', // -> accessible at /fr/a-propos
        }
      },

If I input the url directly it works.

How can I get nuxt-link/localePath to properly print the link?

Answer 1

I had the same issue. After some research and a deeper look in the generated router.js inside the ".nuxt" Folder, you can see the generated routes in the function "createRouter()". There you can see, that the name of each route contains the path. But in this case the path is simply linked by a hyphen.

For your example this should work as follows: <nuxt-link :to="localePath('addItem-food')">