useActiveElement
Reactive document.activeElement
Demo
Usage
vue
<script setup lang="ts"> import { useActiveElement } from '@vueuse/core' import { watch } from 'vue' const activeElement = useActiveElement() watch(activeElement, (el) => { console.log('focus changed to', el) }) </script>
Component Usage
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
vue
<template> <UseActiveElement v-slot="{ element }"> Active element is {{ element?.dataset.id }} </UseActiveElement> </template>
Type Declarations
ts
export interface UseActiveElementOptions extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot { /** * Search active element deeply inside shadow dom * * @default true */ deep?: boolean /** * Track active element when it's removed from the DOM * Using a MutationObserver under the hood * @default false */ triggerOnRemoval?: boolean } /** * Reactive `document.activeElement` * * @see https://vueuse.org/useActiveElement * @param options * * @__NO_SIDE_EFFECTS__ */ export declare function useActiveElement<T extends HTMLElement>( options?: UseActiveElementOptions, ): ShallowRef<T | null | undefined, T | null | undefined> export type UseActiveElementReturn = ReturnType<typeof useActiveElement>