How to generated virtual route

[frg2089]

I did it! Thanks @posva

Code for unplugin-vue-router

// vite.config.ts
import { type EditableTreeNode } from 'unplugin-vue-router'
import VueRouter from 'unplugin-vue-router/vite'

// ...

const locales = ['zh', 'en']

const makeRoute = (
  route: EditableTreeNode,
  parent: EditableTreeNode,
  locale: string,
  path: string,
  file?: string,
) => {
  // 
  const newRoute = parent.insert(path, file as any)
  if (file == null) newRoute.components.clear()

  // copy meta data
  newRoute.addToMeta(route.meta)

  newRoute.addToMeta({ locale })

  // process children
  route.children.forEach(subRoute => {
    const newSubRoute = makeRoute(
      subRoute,
      newRoute,
      locale,
      subRoute.path,
      subRoute.components.get('default'),
    )
  })

  return newRoute
}

// ...

VueRouter({
  beforeWriteFiles: async root => {
    routes.children.forEach(route => {
      const file = route.components.get('default')
      const path = route.path

      // make i18n route
      locales.forEach(locale => {
        const newRoute = makeRoute(
          route,
          root,
          locale,
          `/${locale}${path}`,
          file,
        )
      })

      route.delete()
    })
  },
}),

// ...

Origin:

Hi, I used ViteSSG and unplugin-vue-router.
And I want to make it generate more i18n routes from one component file.

such as I have component file like /src/pages/Hello.vue.
I want it generated some routes like /en/hello and /zh/hello.
Then, make they have meta like locale: en and locale: zh.

When I using vite-plugin-pages. I can configure like this.

Code for vite-plugin-pages

import Pages from 'vite-plugin-pages'

const locales = ['zh', 'en']
// ...

    Pages({
      // ...
      onRoutesGenerated: routes =>
        routes.flatMap(i =>
          locales.map(locale => {
            const route = structuredClone(i)
            route.path = `/${locale}${route.path}`

            const setMeta = (route: any) => {
              route.name = `${route.name} - ${locale}`
              route.meta ??= {}
              route.meta.locale = locale

              if (Array.isArray(route.children))
                route.children.forEach(setMeta)

              return route
            }

            return setMeta(route)
          }),
        ),
    }),

// ...

I found beforeWriteFiles. But I cannot found any component file path in EditableTreeNode.

[posva]

beforeWriteFiles should be the way. EditableTreeNode has a components Map:

unplugin-vue-router/src/core/extendRoutes.ts

Line 71 in 76eb565

get components() {