Simple visibility observer plugin for Vue 3 using IntersectionObserver.
npm install vue-use-intersection-observer
Simple and lightweight visibility observer for vue 3, built on top of IntersectionObserver.
- 🧩 Vue 3 plugin
- 🔌 Composable API
- 🔍 Uses native IntersectionObserver
- ⚡ Supports offsets and reactivity
- 🌐 One global observer (better performance)
- 🛡️ Fully written in TypeScript
``bash`
npm i vue-use-intersection-observer
main.ts
`typescript
import { createApp } from 'vue';
import App from './App.vue';
import { VisibilityPlugin } from 'vue-use-intersection-observer';
const app = createApp(App);
app.use(VisibilityPlugin);
app.mount('#app');
`
# Example with composable
`vue
position: 'fixed',
top: '20px',
right: '20px',
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: isvisible ? 'green' : 'red',
}"
>
`
---
# Example with directive
`vue
position: 'fixed',
top: '20px',
right: '20px',
width: '40px',
height: '40px',
borderRadius: '50%',
backgroundColor: isvisible ? 'green' : 'red',
}"
>
style="width: 200px; height: 200px; background: gray"
>
Observed Element
`
> ---
>
> The v-visible directive is intended for simple use cases.once
> It only accepts a callback function and always reports the visibility state.
> For advanced configuration (once, offset, threshold), use the composable API.
> By default always tracks visibility changes ( is implicitly set to false).
>
> ---
#### useIntersectionObserver()
Composable used to observe when elements enter or leave the viewport.
`ts`
const { observe, unobserve } = useIntersectionObserver();
---
#### observe()
Start observing an element.
Parameters:
| Name | Type | Description | Required | Default |
| ------- | ------- | ---------------------- | -------- | ------- |
| target | ref | Element ref to observe | true | — |
| options | Options | Observer configuration | true | — |
Options:
| Name | Type | Description | Required | Default |
| --------- | --------------- | -------------------------------- | -------- | ------- |
| callback | function | Called when visibility changes | true | — |
| offset | number | Trigger before entering viewport | false | 0 |0
| threshold | number or array | Intersection threshold | false | |true
| once | boolean | Trigger only the first time | false | |
---
#### unobserve()`
Stop observing a previously registered element.
| Name | Type | Description | Required | Default |
| ------ | ---- | ----------------------------- | -------- | ------- |
| target | ref | Element ref to stop observing | true | — |
!Demo
MIT License - see LICENSE for details.