{"_id":"vue-collision","_rev":"52-53fb05a1fe917773cedb9d078faebe13","name":"vue-collision","dist-tags":{"latest":"2.0.2"},"versions":{"0.0.1":{"name":"vue-collision","version":"0.0.1","author":{"name":"Marco Boffo","email":" Vue 3 directive that fires `collide` / `non-collide` events when an element enters or leaves the viewport, plus element-to-element group collision detection via AABB.\n\n[![CI](https://github.com/scaccogatto/vue-collision/actions/workflows/ci.yml/badge.svg)](https://github.com/scaccogatto/vue-collision/actions/workflows/ci.yml)\n[![npm version](https://img.shields.io/npm/v/vue-collision.svg)](https://www.npmjs.com/package/vue-collision)\n[![npm downloads](https://img.shields.io/npm/dm/vue-collision)](https://www.npmjs.com/package/vue-collision)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\n## Features\n\n- **Viewport collision** via [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) — zero-cost, edge-triggered\n- **Element-to-element group collision** via rAF + AABB overlap — groups any number of elements and checks every pair\n- Fires native DOM `CustomEvent`s (`collide`, `non-collide`, `collide-`, `non-collide-`)\n- Grouping: place elements in named groups; any pair within a group is checked\n- `.prevent` modifier to opt out of viewport tracking\n- TypeScript source with `.d.ts` declarations\n- Vue 3 only (v2.x); for Vue 2 use [v1.x](https://www.npmjs.com/package/vue-collision/v/1.6.0)\n\n## Install\n\n```sh\nnpm install vue-collision\n```\n\n## Quick start\n\n### main.ts\n\n```ts\nimport { createApp } from 'vue'\nimport VueCollision from 'vue-collision'\nimport App from './App.vue'\n\ncreateApp(App)\n .use(VueCollision, { globalTriggers: ['resize', 'scroll'] })\n .mount('#app')\n```\n\n### Component (`\n\n\n```\n\n## Directive reference\n\n| Syntax | Behaviour |\n|--------|-----------|\n| `v-collision` | Viewport group + IntersectionObserver |\n| `v-collision.prevent` | Opt out of viewport group |\n| `v-collision=\"['g1', 'g2']\"` | Add to named groups (`g1`, `g2`) |\n| `v-collision.prevent=\"['g1']\"` | Named groups only, no viewport tracking |\n\n## Events\n\nAll events are native DOM `CustomEvent`s. Read the collider from `event.detail`.\n\n| Event | Fires when | `event.detail` |\n|-------|-----------|----------------|\n| `collide` | Element enters the viewport | `window` |\n| `non-collide` | Element leaves the viewport | `window` |\n| `collide-` | Element overlaps another in the same group | The other `HTMLElement` |\n| `non-collide-` | Element stops overlapping another in the same group | The other `HTMLElement` |\n\n## Plugin options\n\n```ts\napp.use(VueCollision, {\n // Events that trigger element-group re-checks. Default: ['resize', 'scroll']\n globalTriggers: ['resize', 'scroll'],\n})\n```\n\n## Migrating from v1 (Vue 2 → Vue 3)\n\nv2.0.0 is a full Vue 3 rewrite. Key breaking changes:\n\n1. **Install** — replace `Vue.use(...)` with `app.use(...)`.\n\n2. **Event delivery** — events are now native DOM `CustomEvent`s, not Vue component events. The collider is on `event.detail`, not the first argument:\n\n ```js\n // v1 (Vue 2)\n onCollide(collider) { /* collider was the Vue instance */ }\n\n // v2 (Vue 3)\n onCollide(event) { const collider = event.detail }\n ```\n\n3. **Listen with `@` on a plain element** — `v-collision` must be placed on a host element (`
`, `
`, etc.) not a component root. If your component exposes its root element, use `v-bind=\"$attrs\"` to forward the listeners.\n\n4. **Viewport detection** — now uses `IntersectionObserver` instead of `requestAnimationFrame` polling (lower CPU, fires immediately).\n\n5. **Element-group re-check timing** — element-group collision is checked once per frame-request, triggered by mount, `updated`, and the configured `globalTriggers` (default: `resize`, `scroll`). Pure CSS transforms or animations that move elements without triggering a scroll, resize, or Vue reactive update will not automatically re-check. Add a global trigger event or call `window.dispatchEvent(new Event('resize'))` to force a re-check if needed.\n\n## Development\n\n```sh\nnpm install\nnpm run typecheck\nnpm run build\nnpm test\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}