Nuxt Intersection Observer

Nuxt module using a Vue custom directive and the Intersection Observer API to trigger animations.

• ✨  Release Notes

Features

• 🎯  Trigger animations on elements entering the viewport
• 🚀  Smooth transitions using the Intersection Observer API
• 🌟  Customizable animation effects (coming soon)

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-intersection-observer

That's it! You can now use Nuxt Intersection Observer in your Nuxt app ✨

Usage

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-intersection-observer'
  ],
})

Use the directive in your components:

<template>
  <div v-observe>
    This content will fade in when it enters the viewport.
  </div>
</template>

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release