Usage with unplugin-auto-import

[valgeirb]

Thanks for this plugin, it's really useful to get type hints for my routes.

I'm using unplugin-auto-import and was wondering what I should do to make these two plugin gel together. According to the docs, I should replace all my vue-router imports to @vue-router but that doesn't seem to work in vite.config.ts.

So my config looks something like this:

plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'], // can't use @vue-router here
    }),
    VueRouter({
      routesFolder: 'src/pages',
    })
  ],

Things seem to mostly work, I get type hints for my routes this way in most places (doesn't seem to work when using $route in templates though)

Am I doing things wrong or is this ok?

Update:

Things seem to break when building, I get this error as an example:

Property 'isActive' does not exist on type 'RouteLocationResolvedTyped<RouteNamedMap, "/"> | RouteLocationResolvedTyped<RouteNamedMap, "/[...all]"> | ... 16 more ... | RouteLocationResolvedTyped<...>'.

14     <RouterLink :to="to" v-slot="{ isActive }" @click="close">

This can be fixed by manually importing RouterLink from @vue-router:

import { RouterLink } from '@vue-router'

but I'd rather have the auto-import plugin work for me instead.

[valgeirb]

Do we need a preset for this?

[edwardnyc]

unplugin-auto-import. has presets with vue-router old version. you can rewrite it in the configuration file of auto-import

unplugin-auto-import preset pr
but Currently our functionality is not stable. I think we can wait and submit

[hi-reeve]

it's coming soon #12

[posva]

Added a section in the Readme for this and the two exports that exist for vue-router in unplugin-auto-import