diff --git a/src/guide/reusability/custom-directives.md b/src/guide/reusability/custom-directives.md index 206a840a5c..d8ff59031d 100644 --- a/src/guide/reusability/custom-directives.md +++ b/src/guide/reusability/custom-directives.md @@ -230,3 +230,26 @@ When used on components, custom directives will always apply to a component's ro ``` Note that components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be thrown. Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`. + + +## Typing Global Custom Directives {#typing-global-custom-directives} + +In order to get autocompletion and type-checking for your global custom directives, you can extend the `ComponentCustomProperties` interface. + +```ts +import { type Directive } from "vue" + +declare module "vue" { + interface ComponentCustomProperties { + vCustomDirective: Directive + } +} +``` + +```vue-html + + +
+ My component content +
+```