vueCompilerOptions.checkUnknownDirectives requires directives to be prefixed with v in Options API

[johannes-lindgren]

Vue - Official extension or vue-tsc version

2.2.8

VSCode version

Vue version

3.5.13

TypeScript version

8.27.0

System Info

System:
    OS: macOS 15.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 88.20 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - ~/.asdf/shims/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.9.0/bin/npm
    pnpm: 9.14.4 - ~/.nvm/versions/node/v22.9.0/bin/pnpm
  Browsers:
    Brave Browser: 134.1.76.73
    Chrome: 134.0.6998.118
    Safari: 18.1

package.json dependencies

{
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@eslint/js": "^9.22.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.22.0",
    "eslint-plugin-vue": "^10.0.0",
    "globals": "^16.0.0",
    "typescript": "~5.7.2",
    "typescript-eslint": "^8.27.0",
    "vite": "^6.2.0",
    "vue-tsc": "^2.2.4"
  },
}

Steps to reproduce

1. With Vite, create a new vue app with typescript

pnpm create vite my-vue-app --template vue-ts
cd my-vue-app
pnpm i

2. In tsconfig.app.json, add vueCompilerOptions.strictTemplates: true:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "vueCompilerOptions": {
    "strictTemplates": true
  }
}

3. Create a component with options API

4. Register a custom directive focus:

5. Include it in the template with v-focus

<template>
  <div>
    <h1 v-focus>Options API</h1>
  </div>
</template>
<script lang="ts">
export default {
  directives: {
    hello:  {
      mounted: (el) => el.focus()
    },
  },
}
</script>

7. Run the type checker

vue-tsc -b
src/OptionsApi.vue:3:9 - error TS2339: Property 'vFocus' does not exist on type '{ hello: { mounted: (el: any) => any; }; } & { $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<{} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 11 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: ...'.

3     <h1 v-focus>Options API</h1>
          ~~~~~~~


Found 1 error.

What is expected?

There should be no type error.

What is actually happening?

The type error disappears when I register the tooltip with a v prefix, but then it won't work at runtime.

Link to minimal reproduction

https://github.com/johannes-lindgren/vuejs_language-tools_-checkUnknownDirectives-bug

Any additional comments?

There is an ugly workaround: create a second <script setup lang="ts">:

<template>
  <div>
    <h1 v-focus>Options API</h1>
  </div>
</template>
<script lang="ts" setup>
const vFocus = {
  mounted: (el: HTMLElement) => el.focus()
}
</script>
<script lang="ts">
export default {
}
</script>

However, this only gets you to get past CI: you can still screw up and TypeScript won't notice it.