Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 595576c

Browse files
authored
docs(directives): using global custom directives with typescript (#3278)
* docs(typescript): using typescript with global custom directives * remove description
1 parent 3aa316a commit 595576c

File tree

3 files changed

+48
-1
lines changed

3 files changed

+48
-1
lines changed

‎src/guide/reusability/custom-directives.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ app.directive('highlight', {
110110
})
111111
```
112112

113+
It is possible to type global custom directives by extending the `ComponentCustomProperties` interface from `vue`
114+
115+
More Details: [Typing Custom Global Directives](/guide/typescript/composition-api#typing-global-custom-directives) <sup class="vt-badge ts" />
116+
113117
## When to use custom directives {#when-to-use}
114118

115119
Custom directives should only be used when the desired functionality can only be achieved via direct DOM manipulation.

‎src/guide/typescript/composition-api.md

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -468,7 +468,8 @@ import { useTemplateRef } from 'vue'
468468
import MyGenericModal from './MyGenericModal.vue'
469469
import type { ComponentExposed } from 'vue-component-type-helpers'
470470
471-
const modal = useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')
471+
const modal =
472+
useTemplateRef<ComponentExposed<typeof MyGenericModal>>('modal')
472473
473474
const openModal = () => {
474475
modal.value?.open('newValue')
@@ -477,3 +478,41 @@ const openModal = () => {
477478
```
478479

479480
Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases.
481+
482+
## Typing Global Custom Directives {#typing-global-custom-directives}
483+
484+
In order to get type hints and type checking for global custom directives declared with `app.directive()`, you can extend `ComponentCustomProperties`
485+
486+
```ts [src/directives/highlight.ts]
487+
import type { Directive } from 'vue'
488+
489+
export type HighlightDirective = Directive<HTMLElement, string>
490+
491+
declare module 'vue' {
492+
export interface ComponentCustomProperties {
493+
// prefix with v (v-highlight)
494+
vHighlight: HighlightDirective
495+
}
496+
}
497+
498+
export default {
499+
mounted: (el, binding) => {
500+
el.style.backgroundColor = binding.value
501+
}
502+
} satisfies HighlightDirective
503+
```
504+
505+
```ts [main.ts]
506+
import highlight from './directives/highlight'
507+
// ...other code
508+
const app = createApp(App)
509+
app.directive('highlight', highlight)
510+
```
511+
512+
Usage in component
513+
514+
```vue [App.vue]
515+
<template>
516+
<p v-highlight="'blue'">This sentence is important!</p>
517+
</template>
518+
```

‎src/guide/typescript/options-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,3 +291,7 @@ The placement of this augmentation is subject to the [same restrictions](#type-a
291291
See also:
292292

293293
- [TypeScript unit tests for component type extensions](https://github.com/vuejs/core/blob/main/packages-private/dts-test/componentTypeExtensions.test-d.tsx)
294+
295+
## Typing Global Custom Directives {#typing-global-custom-directives}
296+
297+
See: [Typing Custom Global Directives](/guide/typescript/composition-api#typing-global-custom-directives) <sup class="vt-badge ts" />

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /