{"id":12510,"library":"vue-intersect","title":"Vue Intersect (Vue 2 Component)","description":"Vue Intersect is a Vue 2 component designed to wrap the native Intersection Observer API, providing a declarative way to detect when an HTML element enters or leaves the viewport. Last published in March 2020 (version 1.1.6), this package is specifically compatible with Vue 2.x projects and has not been updated for Vue 3. Modern Vue 3 applications typically implement similar functionality using composables (e.g., `@intersection-observer/vue`) or directives, which align better with the Composition API. Due to its sole reliance on Vue 2 and lack of recent development, it is considered abandoned for new projects, though it remains functional for existing Vue 2 applications. Its primary differentiation was simplifying a browser API within the Vue 2 ecosystem.","status":"abandoned","version":"1.1.6","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/heavyy/vue-intersect","tags":["javascript"],"install":[{"cmd":"npm install vue-intersect","lang":"bash","label":"npm"},{"cmd":"yarn add vue-intersect","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-intersect","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; this package is built for Vue 2.x and requires Vue to be present in the project. Specifically targets ^2.4.2.","package":"vue","optional":false}],"imports":[{"note":"CommonJS `require` is not the idiomatic way to register Vue plugins in modern Vue 2 applications; prefer ES module imports and `Vue.use()` for global registration.","wrong":"const VueIntersect = require('vue-intersect');","symbol":"VueIntersect","correct":"import Vue from 'vue';\nimport VueIntersect from 'vue-intersect';\n\nVue.use(VueIntersect);"},{"note":"This imports the `Intersect` component for local registration within a Vue component's `components` option.","symbol":"Intersect","correct":"import Intersect from 'vue-intersect';"},{"note":"The primary usage pattern is as a component, wrapping the content you wish to observe. Events like `enter`, `leave`, and `change` are emitted by the component.","symbol":"Intersect component usage","correct":"<template>\n  <Intersect @enter=\"handleEnter\" @leave=\"handleLeave\">\n    <div>Content to observe</div>\n  </Intersect>\n</template>"}],"quickstart":{"code":"import Vue from 'vue';\nimport Intersect from 'vue-intersect';\n\nVue.component('Intersect', Intersect);\n\nnew Vue({\n  el: '#app',\n  data: {\n    isVisible: false\n  },\n  methods: {\n    handleIntersect(entry) {\n      this.isVisible = entry.isIntersecting;\n      console.log('Intersection changed:', entry.isIntersecting);\n    },\n    handleEnter(entry) {\n      console.log('Element entered viewport!', entry.target);\n    },\n    handleLeave(entry) {\n      console.log('Element left viewport!', entry.target);\n    }\n  },\n  template: `\n    <div id=\"app\" style=\"height: 1200px; padding-top: 500px;\">\n      <h1>Scroll down to see the intersection</h1>\n      <p>Visibility status: {{ isVisible ? 'Visible' : 'Hidden' }}</p>\n      <div style=\"height: 500px; background: #eee; margin-top: 200px;\"></div>\n      \n      <Intersect @change=\"handleIntersect\" @enter=\"handleEnter\" @leave=\"handleLeave\" :threshold=\"[0, 0.5, 1]\">\n        <div style=\"width: 300px; height: 200px; background-color: lightblue; border: 2px solid blue;\">\n          This box is observed for intersection.\n        </div>\n      </Intersect>\n\n      <div style=\"height: 800px; background: #eee; margin-top: 200px;\"></div>\n    </div>\n  `\n});","lang":"javascript","description":"This quickstart demonstrates global registration of the `Intersect` component and its usage with `change`, `enter`, and `leave` events. It shows how to track visibility and trigger actions when an element scrolls into or out of view, with a custom threshold."},"warnings":[{"fix":"For Vue 3 projects, consider using a modern Vue 3-compatible Intersection Observer composable or directive like `@intersection-observer/vue` which uses the Composition API.","message":"This package is built exclusively for Vue 2.x and is incompatible with Vue 3. Attempting to use it in a Vue 3 project will result in errors related to the Vue API.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If supporting older browsers, integrate a suitable polyfill for the Intersection Observer API (e.g., `intersection-observer` polyfill from WICG) into your build process.","message":"The Intersection Observer API is not supported in all browsers (e.g., Internet Explorer 11, older versions of Safari/iOS Safari). Without a polyfill, `vue-intersect` will not function in these environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always include `0` in your `threshold` array if you intend to capture the exact moment an element completely leaves the viewport, e.g., `:threshold=\"[0, 0.5, 1]\"`.","message":"When observing elements, especially for `leave` events, ensure that the `threshold` prop includes `0`. If `0` is omitted from the `threshold` array (e.g., `[0.5, 1]`), the `leave` event may never fire as the observer won't trigger at the 0% intersection point.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Globally register the component using `Vue.component('Intersect', VueIntersect);` or locally import it: `import Intersect from 'vue-intersect'; export default { components: { Intersect }, ... };`","cause":"The `Intersect` component has not been globally registered with `Vue.component` or locally imported and declared in the `components` option of the parent Vue component.","error":"[Vue warn]: Unknown custom element: <Intersect> - did you register the component correctly?"},{"fix":"Ensure that you defensively check `if (entry && entry.isIntersecting !== undefined)` within your callback. For issues with `v-if`, ensure the observer instance is correctly managed or consider alternative patterns, as `vue-intersect` can have subtle interactions with conditional rendering.","cause":"This often occurs if the Intersection Observer callback receives an `entries` array that is empty or the `entry` object itself is undefined, usually when `v-if` conditionally renders the component, causing the observer to unobserve/reobserve unexpectedly or during initial setup.","error":"TypeError: Cannot read properties of undefined (reading 'isIntersecting')"}],"ecosystem":"npm"}