v-intersect
Trigger actions when elements enter or exit the viewport.
Basic Usage
Call a server method when an element becomes visible using IntersectionObserver.
<!-- Load more items when visible -->
<div v-intersect="'loadMore'">
Loading more...
</div>
<!-- Track when user views this section -->
<section v-intersect.once="'trackView'">
Important content
</section>
<!-- With parameters -->
<div v-intersect="['trackImpression', [itemId]]">
Product card
</div>Modifiers
| Modifier | Example | Description |
|---|---|---|
| .once | v-intersect.once |
Only trigger once, then stop observing |
| .leave | v-intersect.leave |
Trigger when element leaves viewport (default is enter) |
| .half | v-intersect.half |
Trigger when 50% visible |
| .full | v-intersect.full |
Trigger when 100% visible |
| :N | v-intersect:100 |
Custom margin in pixels (trigger 100px before visible) |
Common Use Cases
Infinite Scroll
Load more content when user scrolls to the bottom.
Analytics Tracking
Track when specific content is viewed.
Lazy Data Loading
Fetch data only when the section comes into view.
Animation Triggers
Start animations when elements become visible.
Examples
<!-- Infinite scroll: load 100px before reaching bottom -->
<div v-intersect:100="'loadMore'">
<span v-if="livue.loading">Loading...</span>
</div>
<!-- Track view once, when 50% visible -->
<article v-intersect.once.half="'markAsRead'">
Article content...
</article>
<!-- Trigger when element leaves viewport -->
<div v-intersect.leave="'saveProgress'">
Save when I scroll past
</div>
<!-- Must be fully visible -->
<div v-intersect.full.once="'trackFullView'">
Important banner
</div>