⬅️ Back to Table of Contents

📄 useElementVisibility

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	9
📐 Interfaces	2
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useElementVisibility/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
UseIntersectionObserverOptions	../useIntersectionObserver
UseIntersectionObserverReturn	../useIntersectionObserver
watchOnce	@vueuse/shared
shallowRef	vue
defaultWindow	../_configurable
useIntersectionObserver	../useIntersectionObserver

---

Functions

useElementVisibility(element: MaybeComputedElementRef, options: UseElementVisibilityOptions<false>): UseElementVisibilityReturn<false>

Tracks the visibility of an element within the viewport.

See: https://vueuse.org/useElementVisibility

Raw JSDoc

/**
 * Tracks the visibility of an element within the viewport.
 *
 * @see https://vueuse.org/useElementVisibility
 */

Code

export function useElementVisibility(
  element: MaybeComputedElementRef,
  options?: UseElementVisibilityOptions<false>,
): UseElementVisibilityReturn<false>

---

Interfaces

UseElementVisibilityOptions<Controls extends boolean = false>

Interface Code

export interface UseElementVisibilityOptions<Controls extends boolean = false> extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'rootMargin' | 'threshold'> {
  /**
   * Initial value.
   *
   * @default false
   */
  initialValue?: boolean
  /**
   * The element that is used as the viewport for checking visibility of the target.
   */
  scrollTarget?: UseIntersectionObserverOptions['root']
  /**
   * Stop tracking when element visibility changes for the first time
   *
   * @default false
   */
  once?: boolean
  /**
   * Expose more controls
   *
   * @default false
   */
  controls?: Controls
}

Properties

Name	Type	Optional	Description
initialValue	boolean	✓	not shown
scrollTarget	UseIntersectionObserverOptions['root']	✓	not shown
once	boolean	✓	not shown
controls	Controls	✓	not shown

UseElementVisibilityReturnWithControls

Interface Code

export interface UseElementVisibilityReturnWithControls extends UseIntersectionObserverReturn {
  isVisible: ShallowRef<boolean>
}

Properties

Name	Type	Optional	Description
isVisible	ShallowRef<boolean>	✗	not shown

---

Type Aliases

UseElementVisibilityReturn<Controls extends boolean = false>

type UseElementVisibilityReturn<Controls extends boolean = false> = Controls extends true
    ? UseElementVisibilityReturnWithControls
    : ShallowRef<boolean>;

---

Generated by Syntax Scribe