Files

T

fargo 1a822493ba format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

2026-08-19 14:37:17 -05:00

3.0 KiB

Raw Blame History

category
Elements

useElementVisibility

Tracks the visibility of an element within the viewport.

Usage

<script setup lang="ts">
import { useElementVisibility } from '@vueuse/core';
import { useTemplateRef } from 'vue';

const target = useTemplateRef('target');
const targetIsVisible = useElementVisibility(target);
</script>

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

rootMargin

If you wish to trigger your callback sooner before the element is fully visible, you can use the rootMargin option (See MDN IntersectionObserver/rootMargin).

import { useElementVisibility } from '@vueuse/core';
// ---cut---
const targetIsVisible = useElementVisibility(target, {
  rootMargin: '0px 0px 100px 0px',
});

threshold

If you want to control the percentage of the visibility required to update the value, you can use the threshold option (See MDN IntersectionObserver/threshold).

const targetIsVisible = useElementVisibility(target, {
  threshold: 1.0, // 100% visible
});

Component Usage

<template>
  <UseElementVisibility v-slot="{ isVisible }"> Is Visible: {{ isVisible }} </UseElementVisibility>
</template>

Directive Usage

<script setup lang="ts">
import { vElementVisibility } from '@vueuse/components';
import { shallowRef, useTemplateRef } from 'vue';

const target = useTemplateRef('target');
const isVisible = shallowRef(false);

function onElementVisibility(state) {
  isVisible.value = state;
}
</script>

<template>
  <div v-element-visibility="onElementVisibility">
    {{ isVisible ? 'inside' : 'outside' }}
  </div>

  <!-- with options -->
  <div ref="target">
    <div v-element-visibility="[onElementVisibility, { scrollTarget: target }]">
      {{ isVisible ? 'inside' : 'outside' }}
    </div>
  </div>
</template>

Type Declarations

export interface UseElementVisibilityOptions
  extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
  /**
   * Initial value.
   *
   * @default false
   */
  initialValue?: boolean;
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
   */
  rootMargin?: MaybeRefOrGetter<string>;
  /**
   * The element that is used as the viewport for checking visibility of the target.
   */
  scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>;
  /**
   * Stop tracking when element visibility changes for the first time
   *
   * @default false
   */
  once?: boolean;
}
/**
 * Tracks the visibility of an element within the viewport.
 *
 * @see https://vueuse.org/useElementVisibility
 */
export declare function useElementVisibility(
  element: MaybeComputedElementRef,
  options?: UseElementVisibilityOptions,
): ShallowRef<boolean, boolean>;
export type UseElementVisibilityReturn = ReturnType<typeof useElementVisibility>;

3.0 KiB Raw Blame History