# Akryum/vue-observe-visibility

Detect when an element is becoming visible or hidden on the page.

Repository: https://github.com/Akryum/vue-observe-visibility
Canonical: https://ross.abutalabs.com/products/vue-observe-visibility
Homepage: https://jsfiddle.net/Akryum/ppt7endj/
Language: JavaScript
License Family: other
Last push: 2022-11-08T02:15:08+00:00

## Health v2 (maintenance only)
Score: 23/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 0, release rhythm 8, longevity 100
- inputs: {"age_days": 3540, "days_push": 1395, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: no_license
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 1644, forks 85 (observed 2026-08-28T04:05:16.138624+00:00)

## What it is
A Vue 2 plugin providing a v-observe-visibility directive that uses the Intersection Observer API to detect when elements become visible or hidden on the page. It calls a callback with a boolean visibility flag and the IntersectionObserverEntry whenever visibility changes.

## Use cases
- detect when an element scrolls into view in vue
- lazy-load images when they become visible
- pause animations or videos when off-screen
- track ad or content impressions on visibility
- trigger animations when a section enters the viewport
- infinite scroll visibility detection

## When to choose
- you are on Vue 2 and need viewport visibility detection with a simple directive
- you want a lightweight wrapper around IntersectionObserver for Vue components

## When to avoid
- you are using Vue 3, which has native IntersectionObserver patterns or alternative plugins
- you need broad legacy browser support without adding a polyfill

## Facets
- artifact type: library
- maturity: maintenance
- function: ui-components, animation
- domain: frontend, web-development
- platform: browser
- tags: vue, vue2, directive, intersection-observer, visibility-detection, lazy-loading, nodejs

## Member repositories
- Akryum/vue-observe-visibility (main) score 23

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:05:16.138624+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-30T03:45:47.424360+00:00, confidence not recorded.
  - readme: https://github.com/Akryum/vue-observe-visibility (fetched 2026-08-28T04:05:16.138624+00:00, sha 1c9cb68f0007)
  - homepage: https://jsfiddle.net/Akryum/ppt7endj/ (fetched 2026-08-29T11:19:04.006112+00:00, sha 0dc0aa99a7cd)
  - registry_npm: https://registry.npmjs.org/vue-observe-visibility (fetched 2026-08-29T11:19:04.015333+00:00, sha 6823e68970e7)
- Data as of 2026-08-30T08:39:29.467469+00:00.