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