useDocumentVisibility ​
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/components
package. Learn more about the usage.
html
<UseDocumentVisibility v-slot="{ visibility }">
Document Visibility: {{ visibility }}
</UseDocumentVisibility>
<UseDocumentVisibility v-slot="{ visibility }">
Document Visibility: {{ visibility }}
</UseDocumentVisibility>