VueCraft NPM

Nuxt Module ​

@macrulez/inview-nuxt is a thin Nuxt module wrapping @macrulez/inview-vue: it auto-imports every composable, utility, and core engine (so reaching createRevealController/createScrollEngine/etc. never needs a separate @macrulez/inview-core install), registers the v-reveal directive and the <InView> component globally, and seeds SSR-safe defaults from nuxt.config.ts on the client.

Registration ​

ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@macrulez/inview-nuxt'],
  inview: {
    defaultThreshold: 0.25,
    defaultRootMargin: '-10% 0px',
    defaultOnce: true,
  },
})

The module's config key is inview.

Configuration ​

defaultThreshold ​

number | number[] · default: 0

defaultRootMargin ​

string · default: '0px'

defaultOnce ​

boolean · default: false

All three are forwarded into viewportDefaults — the same fallback read by useElementVisibility(), v-reveal, and <InView> alike. Set them once here instead of passing the same options to every call site across the app.

Auto-imports ​

Every one of these is auto-imported, sourced from @macrulez/inview-vue (which itself re-exports the full @macrulez/inview-core surface) — no explicit import needed anywhere in your Nuxt app:

Composables & utilities

  • useScroll
  • useElementVisibility
  • useElementViewport
  • useParallaxLayer
  • useRevealController
  • usePrefersReducedMotion
  • useStagger
  • useScrollTo
  • useScrollSpy
  • mapRange
  • bindCSSVar
  • prefersReducedMotion
  • clamp
  • staggerDelay
  • easings
  • scrollToElement

Core engines — previously only reachable by installing @macrulez/inview-core as a separate dependency:

  • createScrollEngine
  • createVisibilityEngine
  • createElementTracker
  • createRevealController
  • createScrollSpy
  • observerPool
  • ObserverPool
  • rafLoop

Viewport defaults

The module's own plugin already calls setViewportDefaults() once for you from nuxt.config.ts (see below) — this auto-import covers reaching it yourself if you need to change the defaults again at runtime, or read the current values.

v-reveal itself isn't an auto-import — it's a directive, registered globally instead (see below), so it needs no import at all, in templates or scripts. <InView> is likewise registered globally as a component (via @nuxt/kit's addComponent) rather than auto-imported — usable in any template with no import either way.

How the defaults get applied ​

The module registers a client-only plugin (plugin.client.ts — the .client suffix makes it client-only by Nuxt's own file-naming convention) that reads useRuntimeConfig().public.inview and calls setViewportDefaults() with your defaultThreshold/defaultRootMargin/defaultOnce. The composables themselves are already SSR-safe on their own — this plugin's client-only-ness is purely about when the defaults get seeded, not about guarding composable usage. Nothing needs a <ClientOnly> wrapper because of this module.

The same plugin also runs nuxtApp.vueApp.directive('reveal', vReveal), which is what makes v-reveal available in every component's template without an import — the directive equivalent of the auto-imports above.

Using v-reveal and createRevealController ​

vue
<template>
  <div v-for="item in items" :key="item.id" v-reveal.once class="card">
    {{ item.title }}
  </div>
</template>

For a page-wide pass instead of a directive per element — e.g. from a client-only plugin of your own — createRevealController is auto-imported the same way:

ts
// plugins/reveal.client.ts
export default defineNuxtPlugin(() => {
  createRevealController({ stagger: { step: 70, max: 4 } })
})

See Reveal Controller for its full option list, including the per-element data-reveal-* attribute overrides.