Skip to content

useWindowFocus

Category
Export Size
590 B
Last Changed
4 weeks ago

Reactively track window focus with window.onfocus and window.onblur events.

Demo

💡 Click somewhere outside of the document to unfocus.

Usage

js
import { useWindowFocus } from '@vueuse/core'

const focused = useWindowFocus()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue
<template>
  <UseWindowFocus v-slot="{ focused }">
    Document Focus: {{ focused }}
  </UseWindowFocus>
</template>

Type Declarations

typescript
/**
 * Reactively track window focus with `window.onfocus` and `window.onblur`.
 *
 * @see https://vueuse.org/useWindowFocus
 */
export declare function useWindowFocus(
  options?: ConfigurableWindow,
): ShallowRef<boolean>

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
vaaski
Fernando Fernández
Anthony Fu
vaakian X

Changelog

v12.4.0 on 1/10/2025
dd316 - feat: use passive event handlers everywhere is possible (#4477)
v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Conference Offer
Get 50% OFF the Yearly or Lifetime Plan
Access 1450+ lessons on Vue, Pinia, Vite, Tailwind + more
Get Offer
23
hours
:
38
minutes
:
28
seconds
: