@intersection-observer/vue

Vue utilities for observing DOM elements using Intersection Observer API. This package provides composables and components to easily detect when elements enter or leave the viewport.

Installation

``bash
npm install @intersection-observer/vue


or

yarn add @intersection-observer/vue

or

pnpm add @intersection-observer/vue
`

Features

- 🎯 useInView Composable: Vue 3 composable for intersection observer functionality
- 🎨 LazyRender Component: Pre-built component for lazy loading and visibility detection
- 📦 TypeScript Support: Full TypeScript support with type definitions
- 🚀 Vue 3 Compatible: Built for Vue 3 Composition API
- ⚡ Lightweight: Minimal bundle size with no external dependencies

Usage

$3

The useInView composable provides a reactive way to detect when an element enters or leaves the viewport.

`vue



`

#### API

`typescript
function useInView(options?: InViewOptions): {
ref: Ref
inView: Ref
}
`

Options:
- threshold: Number or array of numbers (0-1) indicating at what percentage of the target's visibility the observer's callback should be executed
- rootMargin: String similar to CSS margin (e.g., "10px 20px 30px 40px")
- root: Element to use as the viewport (defaults to browser viewport)

$3

The LazyRender component provides a declarative way to render content based on visibility.

#### Basic Usage

`vue



`

#### With Custom Element

`vue

`

#### With Render Props

`vue

`

#### With Callback

`vue



`

#### LazyRender Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| as | string | 'div' | HTML element to render |
| threshold | number \| number[] | 0 | Visibility threshold (0-1) |
| onChange | (isVisible: boolean) => void | - | Callback when visibility changes |
| className | string | - | CSS class name |
| style | string \| object | - | Inline styles |

Examples

$3

`vue



`

$3

`vue



`

$3

`vue



`

Browser Support

This package uses the Intersection Observer API, which is supported in all modern browsers:

- Chrome 51+
- Firefox 55+
- Safari 12.1+
- Edge 15+

For older browsers, consider using a polyfill like intersection-observer`.

License

MIT