VueCraft NPM

Видимость элемента ​

useElementVisibility(target, options?) — реактивная видимость элемента на базе IntersectionObserver. SSR-safe: наблюдение начинается, как только target разрешается в реальный элемент на клиенте.

ts
function useElementVisibility(
  target: MaybeRefOrGetter<HTMLElement | null | undefined>,
  options?: UseElementVisibilityOptions,
): UseElementVisibilityReturn

Каждый вызов использует один общий модульный инстанс createVisibilityEngine() — согласуется с собственным дизайном движка на пулящихся обсерверах.

Опции ​

threshold ​

number | number[] · по умолчанию: viewportDefaults.threshold (0, если не переопределено)

rootMargin ​

string · по умолчанию: viewportDefaults.rootMargin ('0px', если не переопределено)

root ​

MaybeRefOrGetter<HTMLElement | null | undefined> · по умолчанию: null

once ​

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

onEnter ​

(info: IntersectionInfo) => void · по умолчанию: —

onLeave ​

(info: IntersectionInfo) => void · по умолчанию: —

threshold/rootMargin берут значение по умолчанию из общего объекта viewportDefaults, а не из жёстко заданных 0/'0px' — см. setViewportDefaults() ниже и Модуль Nuxt — там описано, как это обычно настраивается на уровне приложения.

Возвращаемое значение ​

isVisible ​

Ref<boolean>

ratio ​

Ref<number>

Текущий intersectionRatio элемента.

Пример:

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useElementVisibility } from '@macrulez/inview-vue'

const card = ref<HTMLElement | null>(null)
const { isVisible } = useElementVisibility(card, { threshold: 0.5, once: true })
</script>

<template>
  <div ref="card" :class="{ 'is-visible': isVisible }">...</div>
</template>

Автоматически переподписывается при любом изменении target или options.root.

Глобальные значения по умолчанию ​

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

ts
interface ViewportDefaults {
  threshold: number | number[]
  rootMargin: string
}

const viewportDefaults: ViewportDefaults // { threshold: 0, rootMargin: '0px' }

function setViewportDefaults(overrides: Partial<ViewportDefaults>): void

setViewportDefaults() перезаписывает только те поля, что вы реально передали — она подмешивает их в общий объект viewportDefaults, а не заменяет его целиком. Именно это под капотом вызывает @macrulez/inview-nuxt из своих опций модуля.