Dynamic nested views are not rendered with folders

[bgervan]

With the following folder structure

src/pages (folder)
src/pages/hi (folder)
src/pages/hi/[name] (folder)
src/pages/hi/[name]/other.vue
src/pages/hi/[name].vue
src/pages/[...all].vue
src/pages/about.md
src/pages/index.vue
src/pages/README.md

these routes are generated:
https://paths.esm.dev/?p=AAMeJaCAuCDAEAg2AAUF6EpAnGgRcPaAuALjAgC4CVhNYcDgnB3YAmcKD3X4PpmGgE0KJ5QAiAIQBCACXBYgZAAA&t=/hi/asd/other#

For the url /hi/asd/other, the hi/[name].vue is rendered instead of other.vue. If I setup src/pages/hi/[name].other.vue, the other.vue is rendered as expected.

Am I doing something wrong?

[posva]

You are creating nested routes with that approach, so both /hi/[name].vue and /hi/[name]/other.vue are being rendered. Add a <RouterView/> to /hi/[name].vue and you should be able to see it. I think you want to move /hi/[name].vue to /hi/[name]/index.vue though. That will display one or the other

[bgervan]

But this creates optional params, so I think your suggested approach should work as well. But it doesn't in my case. I put the RouterView into the templates, but even the index.vue is not rendered with [name].

I see that the articles folder is not nested, but the index.vue doesn't work there neither. Mentioned as a repro

[posva]

The nested routes seem to be working: https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#nested-routes

[bgervan]

Have you tried the articles example I mentioned?
https://stackblitz.com/edit/unplugin-vue-router-vite-playground
When you click on "Some Article" link, it redirects to 'articles/2' url. But the content is 'Articles' instead of 'Articles 2'.

[posva]

Of course but that example is missing the RouterView in the articles.vue component to display the nested route 🙃. Either that or delete the articles.vue file to remove the route nesting.

[bgervan]

Ok, I got it, when I change something, I needed to stop and rerun the server.

Just to conclude,

src/pages/hi/[name] (folder)
src/pages/hi/[name]/other.vue
src/pages/hi/[name].vue
src/pages/hi/[name].vue (parent route)

Requires RouterView, because it translates to a nested view.

src/pages/hi/[name] (folder)
src/pages/hi/[name]/index.vue
src/pages/hi/[name]/other.vue

Works as standalone views.

Thanks for the help. Can I PR some extended documentation about this? Or fixing the playground to include both scenarios

[posva]

Thanks but I already updated the code in the current working branch (not main).
I always welcome improvements to docs https://github.com/posva/unplugin-vue-router?tab=readme-ov-file#nested-routes.

BTW I updated your comment to include the [name].vue file which is needed for nested routes