nuxt-intersection-observer
v1.0.1
Published
Nuxt module using Intersection Observer API to trigger animations with a Vue custom directive.
Downloads
8
Readme
Nuxt Intersection Observer
Nuxt module using a Vue custom directive and the Intersection Observer API to trigger animations.
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
# 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