NuxtLink `to` prop includes file names instead of paths
I'm new to Nuxt and confused by what I'm seeing when I add a basic
NuxtLink. I was expecting to see the list of route paths in the to prop but instead I'm seeing file names. This becomes a bit trickier if I use route groups, as the file name will contain a segment that isn't part of the path. It's easy enough to ignore autocomplete and just add the expected path, but it seems like the type may not be generated as intended.
Is this a known limitation/issue, or is there something I may need to configure so the type is generated from all available route paths?
4 Replies
Hi @corydeppen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
This is an interesting question about the behavior of the
NuxtLink component in Nuxt. Let's address your concerns based on the available information.
The behavior you're describing, where file names are shown instead of route paths in the to prop of NuxtLink, is not the expected behavior in Nuxt. Typically, Nuxt should generate route paths based on the file structure in your pages/ directory.
According to the Nuxt documentation on routing (https://nuxt.com/docs/getting-started/routing), Nuxt uses file-system routing to create routes based on the components in your pages/ directory. The routes should correspond to the URL structure, not the file names.
However, your experience suggests that there might be an issue with the type generation for routes. This could be related to the experimental typedPages feature in Nuxt. When enabled, this feature should provide typed usage of navigateTo, <NuxtLink>, and router.push() as mentioned in the documentation (https://nuxt.com/docs/guide/going-further/experimental-features#typedpages).
To potentially resolve this issue, you could try enabling the typedPages feature in your nuxt.config.ts file:
If this doesn't resolve the issue, it's possible that there might be a bug or limitation in the current implementation. In that case, it would be worth reporting this behavior to the Nuxt team through their GitHub repository.
For now, as you mentioned, you can manually enter the expected path in the to prop. This should work correctly for navigation, even if the autocomplete suggestions are not ideal.
If you need more precise control over the link component, you might consider creating a custom link component using defineNuxtLink as described in the documentation (https://nuxt.com/docs/api/components/nuxt-link#custom-link-component). This could potentially allow you to implement your own logic for generating the to prop values.
Remember that Nuxt is actively developed, and such issues are often addressed in newer versions. Make sure you're using the latest stable version of Nuxt, and consider checking the GitHub issues or discussions for any known problems related to this behavior.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@232203082174431232> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Daniel's comment about installing
unplugin-vue-router resolved the issue and generated the expected type used by the to prop. I've been trying to avoid adding the shamefully-hoist option for pnpm if possible.
https://github.com/nuxt/nuxt/issues/27616#issuecomment-2168287805GitHub
typedPages does not work without shamefully-hoist unless `unplu...Environment ------------------------------ - Operating System: Linux - Node Version: v18.14.2 - Nuxt Version: - - CLI Version: 3.10.1 - Nitro Version: - - Package Manager: unknown - Builder: - - Us...
I decided to add
public-hoist-pattern[]=*vue-router* to my .npmrc file instead of installing the package with the hope that will reduce the scope of the hoisted packages. It still feels like it's removing one of the benefits of pnpm, so I'm hopeful there may be a fix in the future.