1---
2category: Elements
3---
4 
5# useDocumentVisibility
6 
7Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useDocumentVisibility } from '@vueuse/core'
14 
15const visibility = useDocumentVisibility()
16</script>
17```
18 
19## Component Usage
20 
21```vue
22<template>
23  <UseDocumentVisibility v-slot="{ visibility }">
24    Document Visibility: {{ visibility }}
25  </UseDocumentVisibility>
26</template>
27```
28 
29## Type Declarations
30 
31```ts
32export interface UseDocumentVisibilityOptions extends ConfigurableDocument {}
33export type UseDocumentVisibilityReturn = ShallowRef<DocumentVisibilityState>
34/**
35 * Reactively track `document.visibilityState`.
36 *
37 * @see https://vueuse.org/useDocumentVisibility
38 *
39 * @__NO_SIDE_EFFECTS__
40 */
41export declare function useDocumentVisibility(
42  options?: UseDocumentVisibilityOptions,
43): UseDocumentVisibilityReturn
44```
45