How do you create a custom directive in Vue?

<script setup>
import { ref } from "vue";

// Log with console.log, NOT into reactive state the template renders: writing it
// from a directive's updated hook re-renders the component, which calls updated
// again, forever ("Maximum recursive updates exceeded").
const say = (msg) => console.log(msg);

// 1. Object form: pick the lifecycle hooks you need.
//    In <script setup>, any camelCase variable named vSomething is usable as v-something.
const vFocus = {
  mounted(el) {
    el.focus();
    say("v-focus mounted: focused <" + el.tagName.toLowerCase() + ">");
  },
};

// 2. Function shorthand = the same function for mounted AND updated.
//    binding.arg is the part after ":", binding.modifiers the ".flags".
const vHighlight = (el, binding) => {
  const prop = binding.arg === "bg" ? "backgroundColor" : "color";
  el.style[prop] = binding.value;
  el.style.fontWeight = binding.modifiers.bold ? "bold" : "";
  say(`v-highlight:${binding.arg} value=${binding.value} old=${binding.oldValue} bold=${!!binding.modifiers.bold}`);
};

// 3. A directive that owns a resource: add in mounted, remove in unmounted.
//    Keep the latest handler on the element: binding in mounted is a snapshot.
const vClickOutside = {
  mounted(el, binding) {
    el._handler = binding.value;
    el._onDocClick = (event) => {
      if (!el.contains(event.target)) el._handler(event);
    };
    document.addEventListener("click", el._onDocClick);
    say("v-click-outside: listener added");
  },
  updated(el, binding) {
    el._handler = binding.value;
  },
  unmounted(el) {
    document.removeEventListener("click", el._onDocClick);
    say("v-click-outside: listener removed");
  },
};

const color = ref("crimson");
const open = ref(true);
const outsideClicks = ref(0);
</script>

<template>
  <input v-focus placeholder="I get focus on mount" />

  <p v-highlight:color.bold="color">Text colour follows the select</p>
  <p v-highlight:bg="'lightyellow'">Static background</p>
  <select v-model="color">
    <option>crimson</option>
    <option>teal</option>
  </select>

  <button id="toggle" @click="open = !open">{{ open ? "close" : "open" }} panel</button>
  <div v-if="open" id="panel" v-click-outside="() => outsideClicks++">
    Panel. Clicks outside it: {{ outsideClicks }}
  </div>
</template>

// directives/tooltip.ts
import type { App, Directive, DirectiveBinding } from "vue";

type TooltipEl = HTMLElement & { _tip?: HTMLSpanElement };
type Placement = "top" | "bottom";

// Directive<Element, Value, Modifiers, Arg> types el, binding.value, modifiers and arg.
export const vTooltip: Directive<TooltipEl, string, "fast", Placement> = {
  mounted(el, binding) {
    const tip = document.createElement("span");
    tip.className = `tip tip-${binding.arg ?? "top"}`;
    tip.textContent = binding.value;
    el._tip = tip;
    el.append(tip);
  },
  updated(el, binding: DirectiveBinding<string, "fast", Placement>) {
    if (binding.value !== binding.oldValue && el._tip) el._tip.textContent = binding.value;
  },
  beforeUnmount(el) {
    el._tip?.remove();
    delete el._tip;
  },
  // Only used by server rendering: attributes to put in the HTML string.
  getSSRProps(binding) {
    return { "aria-label": binding.value };
  },
};

// Global registration, usually in main.ts: app.use(directives)
export default {
  install(app: App) {
    app.directive("tooltip", vTooltip);
  },
};

// Let templates type-check v-tooltip everywhere (vue-tsc reads this).
declare module "vue" {
  interface GlobalDirectives {
    vTooltip: typeof vTooltip;
  }
}