Nuxt Viewport

A lightweight, high-performance Vue 3 directive and composable to detect when elements enter the viewport, featuring "Smart Presets", automatic margin compensation for smooth reveals, and seamless Tailwind CSS integration.

• ✨  Release Notes
• 📖  Documentation
• 📚  Core Library Docs

Features

• ⚡️ Lightweight & High Performance: Uses IntersectionObserver for optimal performance.
• 🎯 Smart Presets: Pre-configured animations for common use cases.
• 📐 Automatic Margin Compensation: Smooth reveals without layout shifts.
• 🎨 Tailwind CSS Integration: Seamlessly works with your design system.

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @vikeriait/nuxt-viewport

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

Configuration

You can configure the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@vikeriait/nuxt-viewport'],
  viewport: {
    // Options here
  }
})

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