VueCraft NPM

Модуль Nuxt ​

@macrulez/inview-nuxt — тонкий модуль Nuxt, оборачивающий @macrulez/inview-vue: авто-импортирует каждый composable, утилиту и движок ядра (так что для createRevealController/createScrollEngine/и т.д. никогда не нужна отдельная установка @macrulez/inview-core), регистрирует директиву v-reveal и компонент <InView> глобально и применяет SSR-safe значения по умолчанию из nuxt.config.ts на клиенте.

Регистрация ​

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

Ключ конфигурации модуля — inview.

Конфигурация ​

defaultThreshold ​

number | number[] · по умолчанию: 0

defaultRootMargin ​

string · по умолчанию: '0px'

defaultOnce ​

boolean · по умолчанию: false

Все три прокидываются в viewportDefaults — тот же фолбэк, что читают useElementVisibility(), v-reveal и <InView>. Задайте их один раз здесь, вместо того чтобы передавать одни и те же опции в каждое место вызова по всему приложению.

Авто-импорты ​

Каждое из перечисленного авто-импортируется, беря источник из @macrulez/inview-vue (который сам реэкспортирует всю поверхность @macrulez/inview-core) — явный import в вашем Nuxt-приложении не нужен нигде:

Composables и утилиты

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

Движки ядра — раньше достижимые только через отдельную установку @macrulez/inview-core:

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

Значения по умолчанию для viewport

Собственный плагин модуля уже вызывает setViewportDefaults() один раз за вас из nuxt.config.ts (см. ниже) — этот авто-импорт нужен, если вы хотите сами изменить значения по умолчанию во время работы приложения или прочитать текущие значения.

v-reveal сама по себе не авто-импорт — это директива, регистрируется глобально (см. ниже), так что импорт не нужен вообще, ни в шаблонах, ни в скриптах. <InView> точно так же регистрируется глобально как компонент (через addComponent из @nuxt/kit), а не авто-импортируется — но импорт в любом случае не нужен ни там, ни там.

Как применяются значения по умолчанию ​

Модуль регистрирует клиентский плагин (plugin.client.ts — суффикс .client делает его клиентским по соглашению Nuxt об именах файлов), который читает useRuntimeConfig().public.inview и вызывает setViewportDefaults() с вашими defaultThreshold/defaultRootMargin/defaultOnce. Сами composables уже SSR-safe сами по себе — клиентская природа этого плагина связана только с тем, когда применяются значения по умолчанию, а не с тем, что нужно как-то защищать использование composables. Из-за этого модуля ничему не нужна обёртка <ClientOnly>.

Тот же плагин также вызывает nuxtApp.vueApp.directive('reveal', vReveal) — именно это делает v-reveal доступной в шаблоне любого компонента без импорта, директивный эквивалент авто-импортов выше.

Использование v-reveal и createRevealController ​

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

Для прохода по всей странице вместо директивы на каждом элементе — например, из собственного клиентского плагина — createRevealController авто-импортируется точно так же:

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

Полный список опций, включая переопределения через data-reveal-* атрибуты на элементе — в Контроллере reveal-эффектов.