useIntersectionObserver
A composable for detecting when elements enter or leave the viewport using the Intersection Observer API with automatic cleanup.
Usage
The useIntersectionObserver composable wraps the Intersection Observer API to detect when elements become visible in the viewport. It’s useful for lazy loading images, infinite scroll, entrance animations, and performance optimizations.
<script setup lang="ts">
import { useIntersectionObserver } from '@vuetify/v0'
import { ref, useTemplateRef } from 'vue'
const target = useTemplateRef('target')
const isVisible = ref(false)
useIntersectionObserver(target, (entries) => {
isVisible.value = entries[0].isIntersecting
}, {
threshold: 0.5, // Trigger when 50% visible
rootMargin: '0px'
})
</script>
<template>
<div>
<div style="height: 100vh">Scroll down to see the element</div>
<div ref="target" :class="{ visible: isVisible }">
I'm {{ isVisible ? 'visible' : 'hidden' }}
</div>
</div>
</template>Examples
Scroll Reveal
Cards that animate in when entering the viewport with intersection ratio tracking.
Lazy Loading
Load images only when entering viewport
Infinite Scroll
Fetch more content as users scroll
Analytics
Track visibility for engagement metrics
Animations
Trigger entrance animations on scroll
Video Playback
Auto-play videos when visible
Ad Viewability
Measure ad impressions accurately
Architecture
useIntersectionObserver wraps the native IntersectionObserver API with Vue reactivity:
Functions
useIntersectionObserver
(target: MaybeRef<Element>, callback: (entries: IntersectionObserverEntry[]) => void, options?: IntersectionObserverOptions) => UseIntersectionObserverReturnA composable that uses the Intersection Observer API to detect when an element is visible in the viewport.
useElementIntersection
(target: MaybeRef<Element>, options?: IntersectionObserverOptions) => UseElementIntersectionReturnA convenience composable that uses the Intersection Observer API to detect when an element is visible in the viewport.
Options
Properties
isActive
Readonly<Ref<boolean, boolean>>Whether the observer is currently active (created and observing)
isIntersecting
Readonly<Ref<boolean, boolean>>Whether the target element is currently intersecting with the viewport