useRouter() / useRoute() inferred incorrectly

[vzakharov]

Okay, after finally solving #323, I ran into this:

and this:

I don’t know if it’s because I’m importing incorrectly (the docs do not make it clear on how to actually use the typed routes, not just define them, and the StackBlitz demo seems to be just a boilerplate Vue 3 app with nothing reminiscent of routes), but importing from simply vue-router results in the usual routes, while importing from @vue-router as suggested in the very first screenshot in the readme leads to "cannot find module".

My typed-router.d.ts looks also boilerplate:

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
// It's recommended to commit this file.
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.

declare module 'vue-router/auto-routes' {
  import type {
    RouteRecordInfo,
    ParamValue,
    ParamValueOneOrMore,
    ParamValueZeroOrMore,
    ParamValueZeroOrOne,
  } from 'unplugin-vue-router/types'

  /**
   * Route name map generated by unplugin-vue-router
   */
  export interface RouteNamedMap {
  }
}

Here is my src/router.ts for reference:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router/auto'

//app components
import NotFound from '@/components/NotFound.vue'

//layouts


//facilitator components
import FacilitatorManager from '@/components/facilitator/Manager.vue'

//participant components
import ParticipantTestManager from '@/components/participant/TestManager.vue'

// dev stuff
import ConnectionTest from '@/components/dev/ConnectionTest.vue'
import Hello from '@/components/dev/Hello.vue'

//store

const UUID_PATTERN = '[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}'
const PIN_PATTERN = '\d{4}$'


//router
const routes: RouteRecordRaw[] = [

    { 
        path: '/facilitate/:uuid/', 
        name: 'FacilitatorManager', 
        component: FacilitatorManager,
        props: ({ params: { uuid }, query: { async } }) => ({ uuid, isAsync: async !== undefined }),
    },

    { path: '/hello', component: Hello},
    { path: '/connection-test', component: ConnectionTest },

    {
        path: '/:pinOrUuid?',
        component: ParticipantTestManager,
        props: ({ params: { pinOrUuid } }) => ({ pinOrUuid }),
    },
    // {
    //     path: `/:pinOrUuid(${UUID_PATTERN}|${PIN_PATTERN})/:kind(start|continue|async)?`,
    // TODO: finish this
    // }

    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

]

const router = createRouter({
    history: createWebHistory(),
    // routes // not needed for unplugin-vue-router, auto-injected
})

export { router }

[vzakharov]

Overall, I’d say this package needs a more detailed documentation to be usable, although I’m grateful the possibility exists at all.

[vzakharov]

Okay, after adding the route manually where it should have been auto-generated:

I get correct type inference:

So my problem is typed-routes.d.ts not auto-generating correctly. I wonder if I’m doing anything wrong in router.ts? Should I define the routes by some other way altogether? definePage or something? I’d really prefer to keep my routes defined in one place.

[vzakharov]

Okay, so I figured it only works with file-based routes, which kind of makes sense in terms of ease of parsing I guess. Sorry for getting the wrong impression!

[posva]

You can also add routes at build time with extendRoute and beforeWrite files (https://uvr.esm.is/guide/configuration.html)