Download
vue-observe-visibility is a Vue plugin that detects when an element or component becomes visible or hidden in the browser viewport. It exposes the v-observe-visibility directive, which calls a user-defined function whenever visibility changes. The callback receives a Boolean visibility state and the corresponding IntersectionObserverEntry object. Developers can configure the observer root, root margin, and visibility threshold through standard Intersection Observer options. A once mode stops observation after the first visible event, making it useful for lazy loading and entrance animations. Throttling and leading-event controls reduce noisy updates during rapid scrolling. The observer can be disabled dynamically with a falsy directive value, while older browsers may require an Intersection Observer polyfill.
Features
- Element and Vue component visibility detection
- Intersection Observer API integration
- Visibility state and observer entry callbacks
- Configurable roots, margins, and thresholds
- One-time observation for lazy loading
- Throttling and dynamic observer disabling
Project Samples
