Nuxt ReVue Demo

Reveal content with a single directive.

App-wide defaults live in nuxt.config.ts. Scroll down to see bare v-reveal inherit when: 'visible'.

App defaults

Set once in nuxt.config, inherit everywhere.

reVue: {
  reveal: { when: 'visible', duration: 700 }
}

Bare directive

No options — uses the app-wide config.

<div v-reveal>

Local override

Override only what you need per element.

<div v-reveal="{ delay: 80 }">

App defaults

These elements use bare v-reveal — no options needed.

They inherit when: 'visible', duration, distance, and threshold from reVue.reveal in nuxt.config.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-revue'],
  reVue: {
    reveal: {
      when: 'visible',
      duration: 700,
      distance: 32,
      threshold: 0.2,
      once: true,
    },
  },
})

Viewport trigger

Cards inherit defaults, with only delay overridden.

Card 1

Pricing section

Uses app defaults for when, duration, and distance — only delay is set locally.

Card 2

Feature highlights

Uses app defaults for when, duration, and distance — only delay is set locally.

Card 3

Customer stories

Uses app defaults for when, duration, and distance — only delay is set locally.

Card 4

Call to action

Uses app defaults for when, duration, and distance — only delay is set locally.