Vue in Viewport

Vue 3 plugin that bindes classes to an element if it appears in the client's viewport. The Plugin contains a lightweight, non-dependent Vue directive that is utilizing the intersection observer.

Installation

npm install vue-in-viewport

Usage

Import the Package as Vue plugin

import { createApp } from "vue";
import VueInViewport from "vue-in-viewport";

const app = createApp(/* Your main app component */);

// Use default options configuration
app.use(VueInViewport);

// Or provide custom options
app.use(VueInViewport, {
    classDefault: "in-viewport",
    delay: 300,
    // ... more options
});

// Mount your app to the DOM
app.mount("#app");

Add v-in-viewport to your desired element in your Vue template.

<template>
    <div v-in-viewport class="my-in-viewport-element">
        <!-- some content -->
    </div>
</template>

You can also set the options for every element individualy by parsing the options directly.

<template>
    <div v-in-viewport="{classDefault: 'in-viewport', delay: 300}" class="my-in-viewport-element">
        <!-- some content -->
    </div>
</template>

Options

Option Key	Value Type	Default Value	Description
classDefault	String	in-viewport	General identificator class.
classActive	String	is-in-viewport	Class that's been added when visible in viewport.
classViewed	String	was-in-viewport	Class that's been added when visible in viewport once.
offsetTop	Number	0	Offset from top of the viewport in pixels.
offsetBottom	Number	0	Offset from bottom of the viewport in pixels.
threshold	Number	0	Percentage of the target element's visibility between 0 and 100 at which the class is binded.
triggerOnce	Boolean	false	If true there won't be a viewport-check after once viewed to safe on performance.
delay	Number	0	Sets a delay for the class binding in milliseconds.

Add Styling

Now you can add your custom CSS according to your needs.

In this case we create a fade-in effect for elements that apear in the viewport:

/* define your initial state with .in-viewport */
.in-viewport {
    transition: opacity 0.2s ease, transform 0.3s ease;
    transform: scale(0.8);
    opacity: 0;
}

/* add your visible state with .is-in-viewport for transitioning in and out
or use .was-in-viewport to transition in only once */
.is-in-viewport {
    transform: scale(1);
    opacity: 1;
}