@opuu/inview-vue

InView Vue

Vue 3 directives for viewport detection. Simple v-inview and v-outview directives.

Installation

npm install @opuu/inview-vue

Setup

// main.js
import { createApp } from "vue";
import { createInViewDirective, createOutViewDirective } from "@opuu/inview-vue";

const app = createApp(App);

app.directive("inview", createInViewDirective());
app.directive("outview", createOutViewDirective());

app.mount("#app");

Usage

<template>
	<!-- Enter viewport -->
	<div v-inview="handleEnter">I'm visible!</div>

	<!-- Exit viewport -->
	<div v-outview="handleExit">I'm hidden!</div>

	<!-- Both -->
	<div v-inview="onEnter" v-outview="onExit">Track both</div>
</template>

<script setup>
function handleEnter(event) {
	console.log("Visible:", event.percentage + "%");
}

function handleExit(event) {
	console.log("Hidden");
}

function onEnter(event) {
	event.target.classList.add("visible");
}

function onExit(event) {
	event.target.classList.remove("visible");
}
</script>

Examples

Lazy Loading

<template>
	<img v-for="image in images" :key="image.id" v-inview="lazyLoad" :data-src="https://raw.githubusercontent.com/opuu/inview-vue/HEAD/image.src" src="placeholder.jpg" />
</template>

<script setup>
function lazyLoad(event) {
	const img = event.target;
	img.src = img.dataset.src;
}
</script>

Animations

<template>
	<div v-inview="fadeIn" v-outview="fadeOut" class="box">Animate me!</div>
</template>

<script setup>
function fadeIn(event) {
	event.target.classList.add("animate");
}

function fadeOut(event) {
	event.target.classList.remove("animate");
}
</script>

<style>
.box {
	opacity: 0;
	transition: opacity 0.3s;
}
.box.animate {
	opacity: 1;
}
</style>

Analytics

<template>
	<section v-inview="trackView" data-section="hero">Hero content</section>
</template>

<script setup>
function trackView(event) {
	if (event.percentage > 50) {
		analytics.track("section_viewed", {
			section: event.target.dataset.section,
		});
	}
}
</script>

Configuration

You can configure directives globally:

import { createInViewDirective } from "@opuu/inview-vue";

app.directive(
	"inview",
	createInViewDirective({
		delay: 100, // Debounce delay in ms
		precision: "high", // "low", "medium", or "high"
	})
);

Local Registration

<template>
	<div v-inview="handleEnter">Local directive</div>
</template>

<script setup>
import { createInViewDirective } from "@opuu/inview-vue";

const vInview = createInViewDirective({ delay: 200 });

function handleEnter(event) {
	console.log("Triggered:", event.percentage);
}
</script>

TypeScript

<script setup lang="ts">
import type { InViewEvent } from "@opuu/inview-vue";

function handleEnter(event: InViewEvent): void {
	console.log(`Element is ${event.percentage}% visible`);
}
</script>

Nuxt.js

Create a plugin:

// plugins/inview.js
import { createInViewDirective, createOutViewDirective } from "@opuu/inview-vue";

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.directive("inview", createInViewDirective());
	nuxtApp.vueApp.directive("outview", createOutViewDirective());
});

License

MIT