Package Exports

vue-is-intersecting

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-is-intersecting) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>