Vue Is Intersecting

Vuejs directive to detect when an element appears into the viewport using the intersection observer api

Demo

very lazy loading

Installation

Via npm:

npm install vue-is-intersecting

Via yarn:

yarn add vue-is-intersecting

Import

import Vue from "vue";
import IsIntersecting from "vue-is-intersecting";

Vue.use(IsIntersecting);

Usage

pass the method that you want to use as a callback when the html element appears in the viewport
NB: by default the callback is debounced after 500ms that the element bind appears in the viewport, to execute the callback immediately use the instant modifier.

<div v-is-intersecting[myData]="myMethod">Hello</div>

unique modifier executes the callback only once

<div v-is-intersecting.unique="myMethod">Hello</div>

instant modifier executes the callback immediately, no debounce

<div v-is-intersecting.instant="myMethod">Hello</div>

current modifier executes two different callbacks when the element appears or disappears in the viewport

<div v-is-intersecting.current="[enterMethod, exitMethod]">Hello</div>