Duplicated routes for vanilla vite + router project

[mzenz]

Using vite-plugin-vue-layouts in the most vanilla way possible (using vite + vue-router v4) generates duplicated routes.

This repo reproduces the bug.

Steps:

- git clone https://github.com/mzenz/vite-plugin-vue-layouts-duplicated-route-bug
- cd vite-plugin-vue-layouts-duplicated-route-bug
- yarn && yarn dev

Expected result

Generated routes from setupLayouts() should match the routes returned by router.getRoutes().

Actual result

router.getRoutes() shows duplicated routes for each generated route via setupLayouts().

Note

Likely related to this issue but with a much more stripped-down reproduction to hopefully help with debugging. =)

[fullstackfool]

Same here issue here. Looks like it's generating a route for the "parent" layout file too.

[Starfox64]

I'm running into the same issue. This is breaking my route metadata, making me unable to use router.beforeEach for login redirects and such.

@mzenz have you found a workaround?

[Hua-Space]

Same here issue here. Has anyone found a workaround?

[sistematico]

Same here issue here. Has anyone found a workaround?

Yes: const routes: Post[] = router.getRoutes().filter(i => i.name)

The second route don't have name.

[paolog22]

upvote this

[JohnCampionJr]

I can duplicate this, but I'm not sure of best way to fix it either

[JohnCampionJr]

So there's no way I can figure out to avoid this; it has to do with how vue builds its routes. I've added a createGetRoutes() function to the spa-side to use in place of router.getRoutes() similar to the clientSide version:

https://github.com/JohnCampionJr/vite-plugin-vue-layouts/blob/1041502cacaf4bcab5cb8ae6406fcfaea0715dba/src/clientSide.ts#L44