Sibling Routes from Parent Directory Structure in File-based Routing

[makot-ch]

What problem is this solving

Currently, I have two options for creating a /user/create route:

1. Nested Route (default behavior):
   src/pages/user/create/index.vue creates /user/create as a nested route under /user . This inherits the parent layout, which isn't always desired.
2. Sibling Route (using dot notation):
   src/pages/user.create/index.vue creates /user/create as a sibling route to /user . This solves the layout issue but fragments my folder structure.

And now, I want all user-related pages to reside under src/pages/user/ for better module organization. When I put create under user/, it becomes a nested route. When I use user.create/ as a top-level folder, it separates user-related code from the main user/ directory.

I've tried using user/.create/ (dot-prefixed directory), but Vue Router either ignores it or treats it as hidden. Right now, I'm using the user.create/ top-level folder approach, but this makes it harder to navigate between user-related pages. I have to switch between different top-level directories instead of staying within the user/ context.

Proposed solution

A way to create sibling routes from within the parent directory structure, allowing:

• All user-related pages to stay under src/pages/user/
• A clear convention to signal when a directory under user/ should generate a sibling route (not nested)
• The ability to colocate related components/hooks/utils within the same directory structure

Describe alternatives you've considered

No response

[posva]

See posva/unplugin-vue-router#477

You can customize how files are parsed and transformed to routes through options and use groups to define their layouts. In your case, I think it's

• pages/user/(some-layout)/_parent.vue -> layout for your routes
• pages/user/create.vue -> not affected by that layout

[makot-ch]

Very helpful, thank you.