<NuxtLinkLocale> does not work for nested routes

[MickL]

Environment

- Operating System: Darwin
- Node Version:     v21.2.0
- Nuxt Version:     3.10.1
- CLI Version:      3.10.0
- Nitro Version:    2.8.1
- Package Manager:  bun@1.0.25
- Builder:          -
- User Config:      devtools, css, modules, runtimeConfig, image, build, i18n, ignore, nitro, routeRules, security, vite
- Runtime Modules:  @nuxtjs/i18n@8.1.0, @nuxt/image@1.3.0, nuxt-icon@0.6.8, nuxt-security@1.1.1
- Build Modules:    -

Reproduction

https://stackblitz.com/edit/github-5pbsy2?file=pages%2Findex.vue,layouts%2Fdefault.vue

Describe the bug

<NuxtLinkLocale> does not seem to work with a nested custom path.

For example:

Works:
<NuxtLinkLocale to="/about">about</NuxtLinkLocale>

Does not work:
<NuxtLinkLocale to="/services/advanced">advanced</NuxtLinkLocale>

Additional context

Maybe it is actually not a bug but is missing the name prop

Logs

No response

[MickL]

Added a PR that should support using name

[BobbieGoede]

Since you're translating the routes /services/advanced (and other routes) don't exist, you can view the paths using devtools to confirm this.

You can pass the route name to the to prop instead of a path, same for localePath:

<NuxtLinkLocale to="services-advanced">Link</NuxtLinkLocale>

or

localePath('services-advanced')

[MickL]

Wow this actually works. So my PR is not needed. I didnt know it is workign because it is documented to use localePath({ name: 'about' })

[BobbieGoede]

I understand it's a bit unclear, feel free to open a PR to expand the docs instead! 😄

[MickL]

Made a PR to update the docs :)

[BobbieGoede]

Thanks!

[MickL]

@BobbieGoede How do named routes work with dynamic routes?

E.g. from you website:

pages/
├── blog/
├──── [date]/
├────── [slug].vue

How can I use this with localePath() or <NuxtLinkLocale>? I will update the docs when I know how it works :D

[MickL]

@BobbieGoede