How do you create a custom directive?

Question

Accepted Answer

**Custom directives** let you encapsulate **low-level DOM manipulation** as a reusable `v-*` attribute. Use them when you need direct access to an element (focus, scroll, third-party DOM libraries) — things components/props don't naturally cover. ## Defining a local directive ```vue ``` The naming convention: a variable `vFocus` becomes the directive `v-focus`. ## Directive hooks (mirror component lifecycle) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Using the binding value and argument ```vue ``` The `binding` object carries `value` (the expression), `arg` (after the colon), `modifiers` (after dots), and `oldValue`. ## A practical example: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Global registration ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Why it matters Custom directives are the right tool for **reusable, low-level DOM behavior** — autofocus, click-outside, lazy-loading images, tooltips, integrating non-Vue DOM libraries. They keep such imperative DOM logic encapsulated and declarative (`v-click-outside`) rather than scattered in lifecycle hooks. Knowing the hooks and the `binding` object (value/arg/modifiers), plus cleaning up in `unmounted`, covers their practical use — though for most UI logic, components are still the better choice.