unplugin-vue-router icon indicating copy to clipboard operation
unplugin-vue-router copied to clipboard

Adding a root layout with a group makes the root page non accessible by path

Open posva opened this issue 5 months ago • 5 comments

  • (group)/app.vue
  • (group).vue
  • index.vue

This is kind of a limitation design as there is no way to say (group) is not visitable

Possible solutions:

  • (group)/+layout.vue: the name indicates it's not visitable
  • definePage({ matchable: false }), more flexible, no new convention in files
  • Or both: a layout is implicitly not matchable but can be explicitly be matchable

posva avatar Jul 04 '25 15:07 posva

I might be wrong, but think I am experiencing this while having structure like (dash)/(home).

router.ts:21 [Vue Router warn]: The route named "/(dash)" has a child without a name and an empty path. Using that name won't render the empty path child so you probably want to move the name to the child instead. If this is intentional, add a name to the child route to remove the warning.

On larger point having used Sveltekit routing structure, it feels more clear having each route to be separate folder and not needing _ prefix to exclude things from being route than index based used in other frameworks

Say you have:

user/
  index.vue
  profile.vue (layout)
  profile/
     index.vue
     settings.vue

Just having +layout.vue would help a lot in that respect, so you know profile/+layout.vue applies to profile and helps with scoping when you need _component in layout and in page, you can keep them under profile/_components

Ideally +page.vue would be supported as well, but that is much bigger change.

minht11 avatar Jul 04 '25 15:07 minht11

Isn’t +page just index?

posva avatar Jul 04 '25 16:07 posva

Yeah, but more specifically in Sveltekit it is the only way to define page, each route must be their own folder and contain +page. There is no ambiguity between user/+page.svelte and user/profile/+page.svelte because of their scoping. Compared to user/index.vue user/profile.vue. You can create user/profile/index.vue, but that changes generated route to have extra slash and because it is not enforced you don't generally do that, though I prob should change my code to do that.

If you have +layout, +page is natural extension of that, tho I suppose it could be +index as well. From personal experience at first some developers forget to prefix non route files with _ so unintentionally write components instead of _components. + explicitly marks router related files from regular ones.

index file itself has a lot of preconceived notions about imports in node/js ecosystem, like ability to omit index from import path and so on, thats why Deno choose mod.ts file as a convention, which is just a regular file.


I don't want to detract from the main conversation so just having +layout.vue would help me a lot

minht11 avatar Jul 04 '25 19:07 minht11

I didn’t know about the _ prefix. That sounds interesting, it might be worth adding an example on how to do that with uvr. I’m personally not a big fan of the +page but I like that uvr config is flexible enough to allow such pattern in config. The replacement of the trailing slash is a bit harder to handle but shouldn’t be impossible, it’s another thing that is common enough to be documented!

posva avatar Jul 05 '25 16:07 posva

For anyone looking for a quick solution in the meantime: changing the order of generated routes (e.g. in the same place as setupLayouts in index.ts) to have the root page appear before the layout fixes the issue.

SzymonPajzert avatar Jul 23 '25 23:07 SzymonPajzert