Skip to content

Модуль Nuxt

@macrulez/inview-nuxt — тонкий модуль Nuxt, оборачивающий @macrulez/inview-vue: авто-импортирует каждый composable и утилиту, и применяет их SSR-safe значения по умолчанию из nuxt.config.ts на клиенте.

Регистрация

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

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

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

defaultThreshold

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

defaultRootMargin

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

Оба значения прокидываются в фолбэк useElementVisibility()'s threshold/rootMargin (viewportDefaults) — задайте их один раз здесь, вместо того чтобы передавать одни и те же опции в каждое место вызова по всему приложению.

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

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

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

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

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