Custom Directives
Register global and local directives with lifecycle hooks like mounted and updated to encapsulate DOM manipulation logic outside components.
What Are Directives?
Directives are reusable DOM-manipulation logic attached to elements via the v- prefix. Built-in examples: v-if, v-for, v-model, v-show. Custom directives let you build your own.
Use Case: Auto-focus
A directive can encapsulate small bits of DOM manipulation that don't justify a wrapper component.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>