1---
2category: Utilities
3---
4 
5# createDisposableDirective
6 
7Utility for authoring disposable directives. Reactive effects created within `mounted` directive hook will be tracked and automatically disposed when directive is unmounted.
8 
9## Usage
10 
11Creating a directive that uses `createDisposableDirective`
12 
13```ts
14import { useMouse } from '@vueuse/core'
15import { createDisposableDirective } from '@vueuse/shared'
16 
17export const VDirective = createDisposableDirective({
18  mounted(el, binding) {
19    const value = binding.value
20    if (typeof value === 'function') {
21      // `useMouse` event listener will be removed automatically when directive is unmounted
22      const { x, y } = useMouse()
23      watch(x, val => value(val))
24    }
25  }
26})
27```
28 
29## Type Declarations
30 
31```ts
32type originDirective<H, V, A> =
33  | FunctionDirective<H, V, string, A>
34  | ObjectDirective<H, V, string, A>
35/**
36 * Utility for authoring disposable directives. Reactive effects created within `mounted` directive hook will be tracked and automatically disposed when directive is unmounted.
37 *
38 * @see https://vueuse.org/createDisposableDirective
39 *
40 * @__NO_SIDE_EFFECTS__
41 */
42export declare function createDisposableDirective<
43  H extends HTMLElement,
44  V,
45  A = any,
46>(origin?: originDirective<H, V, A>): originDirective<H, V, A>
47```
48