Typed routing from existing routes

[Rolanddoda]

File-based-routing looks cool but it would be nice if we can get typed routing without the need to use file-based-routing. This plugin automatically creates the routes but instead of just creating them like this:

const routes = [
 { path: '/', name: 'Home', component: () => import('path-to-component') }
]

It also creates the typing:

export interface RouteNamedMap {
 '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
}

Is it possible to export a function like this:

export function createRoute(route: RouteRecordRaw):Record<string, RouteRecordInfo> { /*...*/ }

And probably a function like:

type Route = ReturnType<typeof createRoute>
export function createRoutes(routes: Route[]):RouteNamedMap { /*...*/ }

So we can easily replace the current implementation of routes like:

const routes = createRoutes([
  createRoute({ path: '/', name: 'Home', component: () => import('path-to-component') })
])

Could something like this work and generate the same typing? 🤔

[posva]

This would work in some scenarios but it would have a bad performance (infer params from paths literals) and would be way too verbose. The whole idea is to make things automatic so we don't make errors (like typos). I think that if you give file based routing a try you won't be disappointed 😄

[Rolanddoda]

This would work in some scenarios but it would have a bad performance (infer params from paths literals)

I can't see how this is different from building the routes folder from the file based routing. With file based routing you have to infer params from a path literal that's the name of the folder/file.

I think that if you give file based routing a try you won't be disappointed 😄

The truth is that I have tried it and I like it for simple cases but for advanced stuff it doesn't work well and I also don't want to have folders/files named like _slug, [...all].vue, _slug, etc. I like having folders just for grouping files with simple naming.

---

Anyway, I think I wasn't very clear on what I wanted to say, so I will try again:
My point is to make this plugin usable for existing project so they can benefit too.

• There are projects that already have a routes variable and it would be very time consuming/require effort to change their structure to file based routing in order to enable typing.
• Also, I don't think it's very wise to enable typing only for those who want to use file base routing

So here is what I suggest with the very limited knowledge that I have for how this plugin works:

Do the exact same work you do for file based routing without requiring file based routing e.g. still generate the typed-router.d.ts

I am imagining this can happen by moving the existing routes variable to a separate file and default export it. Could that work?

---

How I create pages:

I have a folder structure like:

src
--pages
----home
------router.ts
----about
------router.ts
----another-page
------router.ts

So every page has a router.ts file that exports route config:

router.ts

import { defineRoute } from '@/utils/define'

export default defineRoute({
  path: '/',
  name: 'Home',
  component: () => import('./PageCmp.vue'),
})

type

export function defineRoute(config: RouteRecordRaw): RouteRecordRaw {
  return config
}

Currently I eager load all pages and create the routes array:

// eager load all pages
const routerConfigs = import.meta.glob<{ default: RouteRecordRaw }>(
  '@/pages/*/router.ts',
  {
    eager: true,
  }
)

const routes = []

for (const path in routerConfigs) {
  try {
    const { default: route } = routerConfigs[path]
    routes.push(route)
  } catch (error) {
    console.error(`Error loading "${path}".`)
    console.error(error)
  }
}

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

But could it be possible for this plugin instead of just reading file based routing to also be able to read an object with RouteRecordRaw type and generate the typed-router.d.ts? So instead of reading the names of folders, to accept the route definitions ({ name: '', path: '', ... })?

If the above scenarios don't work, could it at least be possible to:

1. Create a file with whatever name, that exports an array of available route path just like in file based routing:

export default availableRoutes = {
  'home/index': {
    name: 'Home',
    component: () => import('./Component.vue')
  },

  'about/index': {
    name: 'About',
    component: () => import('./Component.vue')
  }
}

or by supporting the path:

export default availableRoutes = {
  '/': {
    name: 'Home',
    component: () => import('./Component.vue')
  },

  '/about': {
    name: 'About',
    component: () => import('./Component.vue')
  }
}

2. Then in vite.config we can do:

  plugins: [
    // ...
    VueRouter({
      availableRoutes // imported from the file above
    }),
  ],

VueRouter can then generate the typed-router.d.ts just like it does when reading the folder structure to figure out what the URL would be.

3. That would probably be enough but if that can result only in generating the typed-router.d.ts and not the routes (which I think wouldn't be wise to do only that) as a next step we can define the routes like:

createRouter({
  routes: Object.values(availableRoutes) // imported from the file above
})

In this way we would have one single source of truth for generating the types & for the routes with very small changes in the existing way of having routes.

If that can work, then both those who want/like file-based-routing and those who are running on projects that don't have file-based-routing can benefit and have typed routing

[posva]

I see, thanks for the explanation. You want to parse the routes array at build time in order to generate the same types. I think this is a cool idea but probably harder than the current implementation and definitely goes against the idea of keeping everything in one place. I think it's worth exploring if anybody wants to give it a try though. I would see this as a transition to go into file-based routing on an existing project that doesn't have its views organized.

[posva]

I think the idea is similar to #18

[posva]

I think that having a script that handles the migration would be a similar amount of work but would align better with the project:

• script to migrate to this plugin from a barebones vue router project #4

[Rolanddoda]

Yup same idea as #18! And I think it's even better having a low level API to do that!