1---
2category: Elements
3---
4 
5# useElementVisibility
6 
7Tracks the visibility of an element within the viewport.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useElementVisibility } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const target = useTemplateRef('target')
17const targetIsVisible = useElementVisibility(target)
18</script>
19 
20<template>
21  <div ref="target">
22    <h1>Hello world</h1>
23  </div>
24</template>
25```
26 
27### rootMargin
28 
29If you wish to trigger your callback sooner before the element is fully visible, you can use
30the `rootMargin` option (See [MDN IntersectionObserver/rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)).
31 
32```ts
33import { useElementVisibility } from '@vueuse/core'
34// ---cut---
35const targetIsVisible = useElementVisibility(target, {
36  rootMargin: '0px 0px 100px 0px',
37})
38```
39 
40### threshold
41 
42If you want to control the percentage of the visibility required to update the value, you can use the `threshold` option (See [MDN IntersectionObserver/threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold)).
43 
44```ts
45const targetIsVisible = useElementVisibility(target, {
46  threshold: 1.0, // 100% visible
47})
48```
49 
50## Component Usage
51 
52```vue
53<template>
54  <UseElementVisibility v-slot="{ isVisible }">
55    Is Visible: {{ isVisible }}
56  </UseElementVisibility>
57</template>
58```
59 
60## Directive Usage
61 
62```vue
63<script setup lang="ts">
64import { vElementVisibility } from '@vueuse/components'
65import { shallowRef, useTemplateRef } from 'vue'
66 
67const target = useTemplateRef('target')
68const isVisible = shallowRef(false)
69 
70function onElementVisibility(state) {
71  isVisible.value = state
72}
73</script>
74 
75<template>
76  <div v-element-visibility="onElementVisibility">
77    {{ isVisible ? 'inside' : 'outside' }}
78  </div>
79 
80  <!-- with options -->
81  <div ref="target">
82    <div v-element-visibility="[onElementVisibility, { scrollTarget: target }]">
83      {{ isVisible ? 'inside' : 'outside' }}
84    </div>
85  </div>
86</template>
87```
88 
89## Type Declarations
90 
91```ts
92export interface UseElementVisibilityOptions
93  extends
94    ConfigurableWindow,
95    Pick<UseIntersectionObserverOptions, "rootMargin" | "threshold"> {
96  /**
97   * Initial value.
98   *
99   * @default false
100   */
101  initialValue?: boolean
102  /**
103   * The element that is used as the viewport for checking visibility of the target.
104   */
105  scrollTarget?: UseIntersectionObserverOptions["root"]
106  /**
107   * Stop tracking when element visibility changes for the first time
108   *
109   * @default false
110   */
111  once?: boolean
112}
113export type UseElementVisibilityReturn = ShallowRef<boolean>
114/**
115 * Tracks the visibility of an element within the viewport.
116 *
117 * @see https://vueuse.org/useElementVisibility
118 */
119export declare function useElementVisibility(
120  element: MaybeComputedElementRef,
121  options?: UseElementVisibilityOptions,
122): UseElementVisibilityReturn
123```
124