unable to work with unplugin-vue-router/vite

[mathieu-gilloots]

Hello,
I think I'm missing something.
When I create a router, I use the setupLayouts() method.
In the output of the method, I get the right layout with the page as a children.
When I output the router.getRoutes(), I didn't get the layout and children only the page.

My code :

import { createRouter, createWebHistory } from 'vue-router/auto'
import { routes } from 'vue-router/auto/routes'
import { setupLayouts } from 'virtual:generated-layouts'
import type { RouterOptions } from 'vue-router'
import type { UserModule } from '~/types'

const importedRoutesWithLayout = setupLayouts(routes);
export const install: UserModule = (app) => {
  const router = createRouter(<RouterOptions>{
    history: createWebHistory(),
    routes: importedRoutesWithLayout,
  })
  console.log(importedRoutesWithLayout);
  console.log(router.getRoutes());

Output :

Versions used :

Any ideas ?
Thanks

[JohnCampionJr]

Nothings jumping out at me. Can you provide a repro or compare to Vitesse? https://github.com/antfu/vitesse/blob/main/src/main.ts

[mathieu-gilloots]

Hello,
Thanks for your answer.
I will try to create a repro.
The difference with vitesse : I'm not using VueSSG.
I create a router.

const router = createRouter(<RouterOptions>{
    history: createWebHistory(),
    routes: importedRoutesWithLayout,
  })

And I'm passing this router to Vue with use method :
Vue.use(router), before mounting the app.

[hihanley]

@mathieu-gilloots
Look at this: https://github.com/posva/unplugin-vue-router#extendroutes

You need to create router in this way:

import { createRouter } from 'vue-router/auto'
import { setupLayouts } from 'virtual:generated-layouts'

const router = createRouter({
  // ...
  extendRoutes: (routes) => setupLayouts(routes),
})

[JohnCampionJr]

Added this to README

[mathieu-gilloots]

Hello @JohnCampionJr & @hihanley
Just tried, it's written in the doc of unplugin-vue-router.
Need to use the extendRoutes and it's works !

Thanks

[kissu]

Not sure if anything changed but this is my working config with unplugin-vue-router

import { setupLayouts } from 'virtual:generated-layouts';
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from 'vue-router/auto-routes';

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(routes),
});

extendRoutes was undefined for me.