### Vue directives — “v-” helpers

| Directive          | Mini usage                             | What it’s for                                          |
| ------------------ | -------------------------------------- | ------------------------------------------------------ |
| **v-close-popup**  | `<q-btn v-close-popup …>`              | Click hits the nearest `QDialog`/`QMenu` so it closes. |
| **v-intersection** | `<div v-intersection="onEnter">…`      | Fires when element enters / leaves the viewport.       |
| **v-ripple**       | `<div v-ripple>`                       | Material-style click ripple on any element.            |
| **v-mutation**     | `<div v-mutation="onMut">`             | Watches DOM mutations inside the element.              |
| **v-morph**        | `<div v-morph="target">`               | Smoothly morphs element A into element B.              |
| **v-scroll**       | `<div v-scroll="onScroll">`            | Emits scroll position while container/page scrolls.    |
| **v-scroll-fire**  | `<div v-scroll-fire="cfg">`            | Triggers handler once when scrolled past threshold.    |
| **v-touch-pan**    | `<div v-touch-pan.horizontal="onPan">` | Pointer/touch pan gestures (x, y, both).               |
| **v-touch-swipe**  | `<div v-touch-swipe.left="onSwipe">`   | Swipe detection with direction modifiers.              |
| **v-touch-hold**   | `<div v-touch-hold:500="onHold">`      | Long-press / right-click hold handler.                 |
| **v-touch-repeat** | `<div v-touch-repeat="onRepeat">`      | Auto-repeats handler while pointer is held down.       |

These directives ship with Quasar and require **no extra imports**—just drop them in a template.