IntersectionObservable

Older element wrapper registered with the observer passed in from IntersectionObserver's #observer slot.

import IntersectionObservable from "@wikicasa-dev/components/generic/IntersectionObserver/IntersectionObservable";

The observed element of the legacy IntersectionObserver pair: it wraps its slot in a <div> and registers that <div> with the observer prop when mounted. Visibility is not tracked here; it comes from the parent's shared isVisible slot prop. Passing :is-visible="isVisible" back in removes the wrapper <div> once visible. See IntersectionObserver for the full legacy pattern.

For new work use IntersectionObserverTarget inside an IntersectionObserverProvider: it tracks visibility per element and needs no observer prop.

#Usage

Shown so existing code can be read; don't add new instances.

<script setup lang="ts">
import IntersectionObserver from "@wikicasa-dev/components/generic/IntersectionObserver/IntersectionObserver";
import IntersectionObservable from "@wikicasa-dev/components/generic/IntersectionObserver/IntersectionObservable";
</script>

<template>
  <IntersectionObserver>
    <template #observer="{ observer, isVisible }">
      <IntersectionObservable :observer="observer" :is-visible="isVisible">
        <img v-if="isVisible" src="/img/attico-roma.jpg" alt="Attico a Roma" width="120" height="110" />
      </IntersectionObservable>
    </template>
  </IntersectionObserver>
</template>

#Do / Don't

• Don't use in new designs; use IntersectionObserverTarget.
• Always pass the slot's observer; without it nothing is observed and content gated on isVisible never shows.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
observer	IntersectionObserver | null	null
isVisible	boolean	false

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.