useDocumentVisibility ​
Reactively track document.visibilityState
Demo ​
💡 Minimize the page or switch tab then return
Usage ​
js
import { useDocumentVisibility } from '@vueuse/core'
const visibility = useDocumentVisibility()
Component Usage ​
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
vue
<template>
<UseDocumentVisibility v-slot="{ visibility }">
Document Visibility: {{ visibility }}
</UseDocumentVisibility>
</template>
Type Declarations ​
typescript
/**
* Reactively track `document.visibilityState`.
*
* @see https://vueuse.org/useDocumentVisibility
*/
export declare function useDocumentVisibility(
options?: ConfigurableDocument,
): Ref<DocumentVisibilityState>
Source ​
Contributors ​
Anthony Fu
Antério Vieira
vaakian X
Jelf
Shinigami
wheat
Alex Kozack
Scott Bedard