ReVue

ReVue is a lightweight Nuxt module that adds configurable, hydration-safe reveal animations through a v-reveal directive.

Features

• One directive with no component wrappers
• Mount-time or viewport-triggered reveals (IntersectionObserver)
• Configurable delay, duration, and travel distance
• Staggered list animations
• Optional replay prevention with onceKey
• Compatible with server-rendered Nuxt applications

Installation

Add ReVue to your Nuxt application:

npx nuxt module add nuxt-revue

Or install and register it manually:

npm install nuxt-revue

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

Usage

Basic reveal

Add v-reveal to any HTML element:

<template>
  <h1 v-reveal>
    Revealed on page load
  </h1>
</template>

Custom animation

Values for delay and duration are milliseconds. distance is measured in pixels.

<template>
  <section
    v-reveal="{
      delay: 150,
      duration: 600,
      distance: 32,
    }"
  >
    Custom reveal
  </section>
</template>

Staggered list

Calculate the delay from the item index to reveal a list in sequence:

<template>
  <article
    v-for="(item, index) in items"
    :key="item.id"
    v-reveal="{
      delay: index * 100,
    }"
  >
    {{ item.title }}
  </article>
</template>

Reveal on scroll

Use when: 'visible' to wait until the element enters the viewport:

<template>
  <section
    v-reveal="{
      when: 'visible',
      threshold: 0.2,
      rootMargin: '0px 0px -10% 0px',
    }"
  >
    Revealed when scrolled into view
  </section>
</template>

Reveal only once

Use onceKey to prevent an animation from replaying when a group is mounted again:

<template>
  <section v-reveal="{ onceKey: 'pricing' }">
    Pricing
  </section>
</template>

Styling

The default reveal stylesheet ships with the module — no setup required. ReVue adds reveal, then reveal--in, and sets --reveal-delay, --reveal-duration, and --reveal-distance.

To provide your own animation, disable the built-in CSS and style those classes yourself:

export default defineNuxtConfig({
  modules: ['nuxt-revue'],
  reVue: {
    css: false,
  },
})

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 24px));
}

.reveal.reveal--in {
  animation:
    my-reveal var(--reveal-duration, 800ms) cubic-bezier(0.16, 1, 0.3, 1)
    var(--reveal-delay, 0ms) forwards;
}

@keyframes my-reveal {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance, 24px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal--in {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

Options

Module options

• css: include the default reveal stylesheet. Defaults to true.

Directive options

• when: 'mount' (default) or 'visible' for IntersectionObserver.
• delay: delay before the animation starts. Defaults to 0.
• duration: animation duration. Defaults to 800.
• distance: vertical travel distance. Defaults to 24.
• threshold: IntersectionObserver threshold. Defaults to 0.15.
• rootMargin: IntersectionObserver rootMargin. Defaults to '0px'.
• once: when when: 'visible', reveal only the first time. Defaults to true.
• onceKey: prevents the same reveal group from replaying after it has mounted.

Set app-wide defaults in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-revue'],
  reVue: {
    reveal: {
      when: 'visible',
      duration: 700,
    },
  },
})

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