Vueuse directive not prefixed with "v" in .d.ts file

[J-Michalek]

Describe the bug

The outputed name of the directive is not prefixed with "v" making TS unhappy:

Reproduction

not needed

System Info

System:
    OS: macOS 15.3
    CPU: (8) arm64 Apple M1
    Memory: 96.56 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.volta/tools/image/node/22.13.1/bin/node
    Yarn: 4.6.0 - ~/.volta/tools/image/yarn/4.6.0/bin/yarn
    npm: 11.1.0 - ~/.volta/tools/image/npm/11.1.0/bin/npm
    pnpm: 9.12.1 - ~/Library/pnpm/pnpm
  Browsers:
    Brave Browser: 133.1.75.178
    Chrome: 133.0.6943.55
    Safari: 18.3
    Safari Technology Preview: 18.2

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[userquin]

Can you try with unplugin-auto-import directives instead?

https://github.com/unplugin/unplugin-auto-import/blob/main/playground/vite.config.ts#L21

[J-Michalek]

@userquin Is it also an option for webpack? Not using Vite at the moment.

[userquin]

it should, just move the configuration from vue components to auto import plugin (Volar should also suggest directives)

[J-Michalek]

@userquin Would there be a simple way to do this for VueUse's directives instead of custom directory?

[userquin]

vueuse should export a directives preset for unimport/auto-import (vueuse/vueuse#4225) , but you can create a preset in the meantime:

import type { InlinePreset } from 'unimport'
...
AutoImport({
  vueDirectives: true,
  imports: [
    'vue', 
    '@vueuse/core',
    // maybe you need to move this inline preset before previous preset adding the type and the import
    <InlinePreset>{
      from: '@vueuse/components' // <== the directive exported from components
      meta: { vueDirective: true },
      imports: [{ name: 'vOnLongPress' }, ....] // <== maybe can be used with the name directly (no laptop)
      // imports: ['vOnLongPress',...]             <== with this
    }
  ]
})

EDIT:
You can also use your custom directives folder if needed, change vueDirectives option with object notation including dirs with your directives folder.
You can apply previous directives preset to any package including directives, for example vuetify (we have a PR to add a few subpackage exports vuetifyjs/vuetify#20536)