VueCraft NPM

Nuxt Module ​

@macrulez/inview-nuxt is a thin Nuxt module wrapping @macrulez/inview-vue: it auto-imports every composable and utility, and seeds their 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',
  },
})

The module's config key is inview.

Configuration ​

defaultThreshold ​

number | number[] · default: 0

defaultRootMargin ​

string · default: '0px'

Both are forwarded into useElementVisibility()'s threshold/rootMargin fallback (viewportDefaults) — 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 — no explicit import needed anywhere in your Nuxt app:

  • useScroll
  • useElementVisibility
  • useElementViewport
  • useParallaxLayer
  • mapRange
  • bindCSSVar
  • prefersReducedMotion
  • easings

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. 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.