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