victorgarciaesgi/nuxt-typed-router

Routes on deeper path hide routes

SimonSimCity opened this issue · 5 comments

Describe the bug
In my project, I discovered that the type definition for RoutesNamesList only contains the very nested route of a path but not its parent. Since its a bit hard to explain, imagine the following list of pages:

pages/track.vue
pages/track/[id].vue

This only generates typings for the route track-id, but not for the route track. I've created a small sandbox for this: https://stackblitz.com/edit/github-52carx

After running nuxi prepare, the file .nuxt/typed-router/__routes.ts contains types like this:

export type RoutesNamedLocations =
  | { name: 'index' }
  | {
      name: 'track-id';
      params: {
        id: string | number;
      };
    };

Expected behavior
Types for both routes should be generated.

The type mentioned above should be something like:

export type RoutesNamedLocations =
  | { name: 'index' }
  | { name: 'track' }
  | {
      name: 'track-id';
      params: {
        id: string | number;
      };
    };

Screenshots
n/a

Environnement infos

Taken from the sandbox project:

  • Operating System: Linux
  • Node Version: v16.14.2
  • Nuxt Version: 3.5.3
  • Nitro Version: 2.4.1
  • Package Manager: npm@7.17.0
  • Builder: vite
  • User Config: modules
  • Runtime Modules: nuxt-typed-router@3.2.2
  • Build Modules: -

Your nuxt.config.ts

https://stackblitz.com/edit/github-52carx?file=nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [['nuxt-typed-router', { strict: true }]],
});

Hi! That's not realy related to the way this module works but how Nuxt generates its routes, your route will not have a name if you don't put a index.vue in the folder. I only generate what Nuxt gives me

Try adding "pages/track/index.vue" you will see the changes.
To understand look at vue devtools you will see "/track" don't have a route name

It's not a way for nested routes. I have similar issue with foldering structure:

pages/
  account.vue
  account/
    profile.vue
    addresses.vue

In this case account.vue will be the parent route with children routes

Yep but Nuxt will not assign a name for the route /account until there is a pages/account/index.vue. Can't do anything about it as it's the way Nuxt does it

Nice, it works when renaming the pages/track.vue file to pages/track/index.vue 🎉

Just mentioning because nuxt didn't throw an error when I tried: It actually becomes pretty weird when having both a pages/track.vue and a pages/track/index.vue file 🤪

For me, this is fixed 🤗