IntersectionObserver

Older lazy-render helper exposing one observer and a single shared isVisible flag through its #observer slot.

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

First-generation viewport detection. It creates an IntersectionObserver and passes { observer, isVisible } to its #observer slot; you hand observer to one or more IntersectionObservable elements, and isVisible becomes true (for all of them, and stays true) as soon as any one is seen. Still used in older pages.

For new work use IntersectionObserverProvider + IntersectionObserverTarget: same lazy-render use case, a per-target isVisible, no observer object to pass around. The one feature without a direct v2 equivalent is skip (render as visible immediately); with v2, render the content outside the provider instead.

#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">
        <section v-if="isVisible">Notizie dal mercato immobiliare</section>
        <div v-else style="height: 400px" />
      </IntersectionObservable>
    </template>
  </IntersectionObserver>
</template>

#Do / Don't

• Don't use in new designs; use IntersectionObserverProvider.
• observe-once (default true) only stops repeated intersection events; isVisible never goes back to false either way.
• Classes for the temporary wrapper <div> go in the root-classes attribute (kebab-case); the wrapper is removed once visible.
• Importing it as IntersectionObserver shadows the browser's IntersectionObserver class in that file.

#API

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

Props

Name	Type	Default	Required	Description
observeOnce	boolean	true
skip	boolean	false
threshold	number	0

Events

Name	Payload
intersection

v-model

None.

Slots

Name	Slot props
observer	{ observer: { readonly root: Element | Document | null; readonly rootMargin: string; readonly scrollMargin: string; readonly thresholds: readonly number[]; disconnect: () => void; observe: (target: Element) => void; takeRecords: () => IntersectionObserverEntry[]; unobserve: (target: Element) => void; } | null; isVisible: false; }

Exposed (template ref)

None.