Is it possible to mix with classic routes?

[ByScripts]

We already have a lot of routes defined and want to use this plugin only for a specific part of the app.

So I configured the plugin, import { routes as autoRoutes } from "vue-router/auto/routes" then I use these imported routes as a route children:

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // already defined routes...
    {
      path: "...",
      children: autoRoutes,
    }

The problem now is that I have a lot of errors across our codebase when using params from a "classic" route:

error TS2339: Property 'uuid' does not exist on type 'Record<never, never>'.

doSomething(route.params.uuid);
                         ~~~~

Is there a way to mix both types of routes?

[posva]

While not documented yet, you can pass a beforeWriteFiles option to the unplugin in your vite config to add routes manually at build time. These will be also typed.

Any route added at runtime cannot be typed. In order for your types to be useful, you should let the plugin handle all (or almost all) of your routes, otherwise you lose the type safety. The plugin should expose enough options to scan for different folders though. I need to add more docs but the code has a lot of documentation so using auto complete in your IDE should show you a lot of help, especially with the config which is not fully documented in the readme but is in the source

[yakobe]

Hi @posva 👋. The file based routing looks like it would simplify so much! Great stuff.

I'm looking to try and migrate a project to it, but there are many routes so it's not easy to migrate all at once. From what i understand here, it might be possible to use the existing routes with beforeWriteFiles somehow and then gradually migrate them to to the file based routing? However, I cant seem to work out how to do it. Maybe the link above is not pointing at the right code anymore?

Have i understood correctly and it is possible? Could you give a small example to point me in the right direction? Many thanks!

[posva]

Sure, this is now documented. The updated link would be https://github.com/posva/unplugin-vue-router/blob/main/src/options.ts#L161. The option is the same one