From c3a040704a6360d7268c47e794d2446941168ba4 Mon Sep 17 00:00:00 2001
From: Cake <letsmailali.h@gmail.com>
Date: Sun, 28 Jul 2024 02:47:36 +0300
Subject: [PATCH] docs: add typing global custom directives

---
 src/guide/reusability/custom-directives.md | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)

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<unknown, {foo: "value1" | "value2"}>
+  }
+}
+```
+
+```vue-html
+<!-- template of MyComponent -->
+
+<div v-custom-directive="{ foo: 'value1' }"> <!-- autocompletion + type-check -->
+  <span>My component content</span>
+</div>
+```