Vueuse Functions

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

alexanderop f1952ad 268 files · 690.0 KB Updated Sep 17, 2026

Install

Press C to copy

$ npx skillmds@latest add alexanderop/vueuse-functions

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/alexanderop/vueuse-functions.svg)](https://skillmd.com/skills/alexanderop/vueuse-functions)

Trust & safety

Audits pending

Not yet audited · commit f1952ad

License: MIT
Works with: Claude Code Claude.ai OpenAI Codex +

File contents

VueUse Functions

This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

When to Apply

Apply this skill whenever assisting user development work in Vue.js / Nuxt.
Always check first whether a VueUse function can implement the requirement.
Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
Please refer to the Invocation field in the below functions table. For example:
- AUTO: Use automatically when applicable.
- EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
- EXPLICIT_ONLY: Use only when explicitly requested by the user.
  
  NOTE User instructions in the prompt or AGENTS.md may override a function’s default Invocation rule.

Functions

All functions listed below are part of the VueUse library, each section categorizes functions based on their functionality.

IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.

State

Function	Description	Invocation
`createGlobalState`	Keep states in the global scope to be reusable across Vue instances	AUTO
`createInjectionState`	Create global state that can be injected into components	AUTO
`createSharedComposable`	Make a composable function usable with multiple Vue instances	AUTO
`injectLocal`	Extended `inject` with ability to call `provideLocal` to provide the value in the same component	AUTO
`provideLocal`	Extended `provide` with ability to call `injectLocal` to obtain the value in the same component	AUTO
`useAsyncState`	Reactive async state	AUTO
`useDebouncedRefHistory`	Shorthand for `useRefHistory` with debounced filter	AUTO
`useLastChanged`	Records the timestamp of the last change	AUTO
`useLocalStorage`	Reactive LocalStorage	AUTO
`useManualRefHistory`	Manually track the change history of a ref when the using calls `commit()`	AUTO
`useRefHistory`	Track the change history of a ref	AUTO
`useSessionStorage`	Reactive SessionStorage	AUTO
`useStorage`	Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage	AUTO
`useStorageAsync`	Reactive Storage in with async support	AUTO
`useThrottledRefHistory`	Shorthand for `useRefHistory` with throttled filter	AUTO

Elements

Function	Description	Invocation
`useActiveElement`	Reactive `document.activeElement`	AUTO
`useDocumentVisibility`	Reactively track `document.visibilityState`	AUTO
`useDraggable`	Make elements draggable	AUTO
`useDropZone`	Create a zone where files can be dropped	AUTO
`useElementBounding`	Reactive bounding box of an HTML element	AUTO
`useElementSize`	Reactive size of an HTML element	AUTO
`useElementVisibility`	Tracks the visibility of an element within the viewport	AUTO
`useIntersectionObserver`	Detects that a target element's visibility	AUTO
`useMouseInElement`	Reactive mouse position related to an element	AUTO
`useMutationObserver`	Watch for changes being made to the DOM tree	AUTO
`useParentElement`	Get parent element of the given element	AUTO
`useResizeObserver`	Reports changes to the dimensions of an Element's content or the border-box	AUTO
`useWindowFocus`	Reactively track window focus with `window.onfocus` and `window.onblur` events	AUTO
`useWindowScroll`	Reactive window scroll	AUTO
`useWindowSize`	Reactive window size	AUTO

Browser

Function	Description	Invocation
`useBluetooth`	Reactive Web Bluetooth API	AUTO
`useBreakpoints`	Reactive viewport breakpoints	AUTO
`useBroadcastChannel`	Reactive BroadcastChannel API	AUTO
`useBrowserLocation`	Reactive browser location	AUTO
`useClipboard`	Reactive Clipboard API	AUTO
`useClipboardItems`	Reactive Clipboard API	AUTO
`useColorMode`	Reactive color mode (dark / light / customs) with auto data persistence	AUTO
`useCssSupports`	SSR compatible and reactive `CSS.supports`	AUTO
`useCssVar`	Manipulate CSS variables	AUTO
`useDark`	Reactive dark mode with auto data persistence	AUTO
`useEventListener`	Use EventListener with ease	AUTO
`useEyeDropper`	Reactive EyeDropper API	AUTO
`useFavicon`	Reactive favicon	AUTO
`useFileDialog`	Open file dialog with ease	AUTO
`useFileSystemAccess`	Create and read and write local files with FileSystemAccessAPI	AUTO
`useFullscreen`	Reactive Fullscreen API	AUTO
`useGamepad`	Provides reactive bindings for the Gamepad API	AUTO
`useImage`	Reactive load an image in the browser	AUTO
`useMediaControls`	Reactive media controls for both `audio` and `video` elements	AUTO
`useMediaQuery`	Reactive Media Query	AUTO
`useMemory`	Reactive Memory Info	AUTO
`useObjectUrl`	Reactive URL representing an object	AUTO
`usePerformanceObserver`	Observe performance metrics	AUTO
`usePermission`	Reactive Permissions API	AUTO
`usePreferredColorScheme`	Reactive prefers-color-scheme media query	AUTO
`usePreferredContrast`	Reactive prefers-contrast media query	AUTO
`usePreferredDark`	Reactive dark theme preference	AUTO
`usePreferredLanguages`	Reactive Navigator Languages	AUTO
`usePreferredReducedMotion`	Reactive prefers-reduced-motion media query	AUTO
`usePreferredReducedTransparency`	Reactive prefers-reduced-transparency media query	AUTO
`useScreenOrientation`	Reactive Screen Orientation API	AUTO
`useScreenSafeArea`	Reactive `env(safe-area-inset-*)`	AUTO
`useScriptTag`	Creates a script tag	AUTO
`useShare`	Reactive Web Share API	AUTO
`useSSRWidth`	Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like `useMediaQuery` or `useBreakpoints`	AUTO
`useStyleTag`	Inject reactive `style` element in head	AUTO
`useTextareaAutosize`	Automatically update the height of a textarea depending on the content	AUTO
`useTextDirection`	Reactive dir of the element's text	AUTO
`useTitle`	Reactive document title	AUTO
`useUrlSearchParams`	Reactive URLSearchParams	AUTO
`useVibrate`	Reactive Vibration API	AUTO
`useWakeLock`	Reactive Screen Wake Lock API	AUTO
`useWebNotification`	Reactive Notification	AUTO
`useWebWorker`	Simple Web Workers registration and communication	AUTO
`useWebWorkerFn`	Run expensive functions without blocking the UI	AUTO

Sensors

Function	Description	Invocation
`onClickOutside`	Listen for clicks outside of an element	AUTO
`onElementRemoval`	Fires when the element or any element containing it is removed from the DOM	AUTO
`onKeyStroke`	Listen for keyboard keystrokes	AUTO
`onLongPress`	Listen for a long press on an element	AUTO
`onStartTyping`	Fires when users start typing on non-editable elements	AUTO
`useBattery`	Reactive Battery Status API	AUTO
`useDeviceMotion`	Reactive DeviceMotionEvent	AUTO
`useDeviceOrientation`	Reactive DeviceOrientationEvent	AUTO
`useDevicePixelRatio`	Reactively track `window.devicePixelRatio`	AUTO
`useDevicesList`	Reactive enumerateDevices listing available input/output devices	AUTO
`useDisplayMedia`	Reactive `mediaDevices.getDisplayMedia` streaming	AUTO
`useElementByPoint`	Reactive element by point	AUTO
`useElementHover`	Reactive element's hover state	AUTO
`useFocus`	Reactive utility to track or set the focus state of a DOM element	AUTO
`useFocusWithin`	Reactive utility to track if an element or one of its decendants has focus	AUTO
`useFps`	Reactive FPS (frames per second)	AUTO
`useGeolocation`	Reactive Geolocation API	AUTO
`useIdle`	Tracks whether the user is being inactive	AUTO
`useInfiniteScroll`	Infinite scrolling of the element	AUTO
`useKeyModifier`	Reactive Modifier State	AUTO
`useMagicKeys`	Reactive keys pressed state	AUTO
`useMouse`	Reactive mouse position	AUTO
`useMousePressed`	Reactive mouse pressing state	AUTO
`useNavigatorLanguage`	Reactive navigator.language	AUTO
`useNetwork`	Reactive Network status	AUTO
`useOnline`	Reactive online state	AUTO
`usePageLeave`	Reactive state to show whether the mouse leaves the page	AUTO
`useParallax`	Create parallax effect easily	AUTO
`usePointer`	Reactive pointer state	AUTO
`usePointerLock`	Reactive pointer lock	AUTO
`usePointerSwipe`	Reactive swipe detection based on PointerEvents	AUTO
`useScroll`	Reactive scroll position and state	AUTO
`useScrollLock`	Lock scrolling of the element	AUTO
`useSpeechRecognition`	Reactive SpeechRecognition	AUTO
`useSpeechSynthesis`	Reactive SpeechSynthesis	AUTO
`useSwipe`	Reactive swipe detection based on `TouchEvents`	AUTO
`useTextSelection`	Reactively track user text selection based on `Window.getSelection`	AUTO
`useUserMedia`	Reactive `mediaDevices.getUserMedia` streaming	AUTO

Network

Function	Description	Invocation
`useEventSource`	An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server	AUTO
`useFetch`	Reactive Fetch API provides the ability to abort requests	AUTO
`useWebSocket`	Reactive WebSocket client	AUTO

Animation

Function	Description	Invocation
`useAnimate`	Reactive Web Animations API	AUTO
`useInterval`	Reactive counter that increases on every interval	AUTO
`useIntervalFn`	Wrapper for `setInterval` with controls	AUTO
`useNow`	Reactive current Date instance	AUTO
`useRafFn`	Call function on every `requestAnimationFrame`	AUTO
`useTimeout`	Reactive value that becomes `true` after a given time	AUTO
`useTimeoutFn`	Wrapper for `setTimeout` with controls	AUTO
`useTimestamp`	Reactive current timestamp	AUTO
`useTransition`	Transition between values	AUTO

Component

Function	Description	Invocation
`computedInject`	Combine `computed` and `inject`	AUTO
`createReusableTemplate`	Define and reuse template inside the component scope	AUTO
`createTemplatePromise`	Template as Promise	AUTO
`templateRef`	Shorthand for binding ref to template element	AUTO
`tryOnBeforeMount`	Safe `onBeforeMount`	AUTO
`tryOnBeforeUnmount`	Safe `onBeforeUnmount`	AUTO
`tryOnMounted`	Safe `onMounted`	AUTO
`tryOnScopeDispose`	Safe `onScopeDispose`	AUTO
`tryOnUnmounted`	Safe `onUnmounted`	AUTO
`unrefElement`	Retrieves the underlying DOM element from a Vue ref or component instance	AUTO
[`useCurrentElement`](references/useCurrentEl

…(truncated)

---name: vueuse-functionsdescription: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.license: MIT---# VueUse FunctionsThis skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.## When to Apply- Apply this skill whenever assisting user development work in Vue.js / Nuxt.- Always check first whether a VueUse function can implement the requirement.- Prefer VueUse composables over custom code to improve readability, maintainability, and performance.- Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.- Please refer to the `Invocation` field in the below functions table. For example: - `AUTO`: Use automatically when applicable. - `EXTERNAL`: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed. - `EXPLICIT_ONLY`: Use only when explicitly requested by the user. > _NOTE_ User instructions in the prompt or `AGENTS.md` may override a function’s default `Invocation` rule.## FunctionsAll functions listed below are part of the [VueUse](https://vueuse.org/) library, each section categorizes functions based on their functionality.IMPORTANT: Each function entry includes a short `Description` and a detailed `Reference`. When using any function, always consult the corresponding document in `./references` for Usage details and Type Declarations.### State| Function | Description | Invocation || ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- || [`createGlobalState`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO || [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO || [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO || [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO || [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO || [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO || [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO || [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO || [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO || [`useManualRefHistory`](references/useManualRefHistory.md) | Manually track the change history of a ref when the using calls `commit()` | AUTO || [`useRefHistory`](references/useRefHistory.md) | Track the change history of a ref | AUTO || [`useSessionStorage`](references/useSessionStorage.md) | Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO || [`useStorage`](references/useStorage.md) | Create a reactive ref that can be used to access & modify [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO || [`useStorageAsync`](references/useStorageAsync.md) | Reactive Storage in with async support | AUTO || [`useThrottledRefHistory`](references/useThrottledRefHistory.md) | Shorthand for `useRefHistory` with throttled filter | AUTO |### Elements| Function | Description | Invocation || ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ---------- || [`useActiveElement`](references/useActiveElement.md) | Reactive `document.activeElement` | AUTO || [`useDocumentVisibility`](references/useDocumentVisibility.md) | Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState) | AUTO || [`useDraggable`](references/useDraggable.md) | Make elements draggable | AUTO || [`useDropZone`](references/useDropZone.md) | Create a zone where files can be dropped | AUTO || [`useElementBounding`](references/useElementBounding.md) | Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element | AUTO || [`useElementSize`](references/useElementSize.md) | Reactive size of an HTML element | AUTO || [`useElementVisibility`](references/useElementVisibility.md) | Tracks the visibility of an element within the viewport | AUTO || [`useIntersectionObserver`](references/useIntersectionObserver.md) | Detects that a target element's visibility | AUTO || [`useMouseInElement`](references/useMouseInElement.md) | Reactive mouse position related to an element | AUTO || [`useMutationObserver`](references/useMutationObserver.md) | Watch for changes being made to the DOM tree | AUTO || [`useParentElement`](references/useParentElement.md) | Get parent element of the given element | AUTO || [`useResizeObserver`](references/useResizeObserver.md) | Reports changes to the dimensions of an Element's content or the border-box | AUTO || [`useWindowFocus`](references/useWindowFocus.md) | Reactively track window focus with `window.onfocus` and `window.onblur` events | AUTO || [`useWindowScroll`](references/useWindowScroll.md) | Reactive window scroll | AUTO || [`useWindowSize`](references/useWindowSize.md) | Reactive window size | AUTO |### Browser| Function | Description | Invocation || ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- || [`useBluetooth`](references/useBluetooth.md) | Reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) | AUTO || [`useBreakpoints`](references/useBreakpoints.md) | Reactive viewport breakpoints | AUTO || [`useBroadcastChannel`](references/useBroadcastChannel.md) | Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) | AUTO || [`useBrowserLocation`](references/useBrowserLocation.md) | Reactive browser location | AUTO || [`useClipboard`](references/useClipboard.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO || [`useClipboardItems`](references/useClipboardItems.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO || [`useColorMode`](references/useColorMode.md) | Reactive color mode (dark / light / customs) with auto data persistence | AUTO || [`useCssSupports`](references/useCssSupports.md) | SSR compatible and reactive [`CSS.supports`](https://developer.mozilla.org/docs/Web/API/CSS/supports_static) | AUTO || [`useCssVar`](references/useCssVar.md) | Manipulate CSS variables | AUTO || [`useDark`](references/useDark.md) | Reactive dark mode with auto data persistence | AUTO || [`useEventListener`](references/useEventListener.md) | Use EventListener with ease | AUTO || [`useEyeDropper`](references/useEyeDropper.md) | Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) | AUTO || [`useFavicon`](references/useFavicon.md) | Reactive favicon | AUTO || [`useFileDialog`](references/useFileDialog.md) | Open file dialog with ease | AUTO || [`useFileSystemAccess`](references/useFileSystemAccess.md) | Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) | AUTO || [`useFullscreen`](references/useFullscreen.md) | Reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) | AUTO || [`useGamepad`](references/useGamepad.md) | Provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) | AUTO || [`useImage`](references/useImage.md) | Reactive load an image in the browser | AUTO || [`useMediaControls`](references/useMediaControls.md) | Reactive media controls for both `audio` and `video` elements | AUTO || [`useMediaQuery`](references/useMediaQuery.md) | Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) | AUTO || [`useMemory`](references/useMemory.md) | Reactive Memory Info | AUTO || [`useObjectUrl`](references/useObjectUrl.md) | Reactive URL representing an object | AUTO || [`usePerformanceObserver`](references/usePerformanceObserver.md) | Observe performance metrics | AUTO || [`usePermission`](references/usePermission.md) | Reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) | AUTO || [`usePreferredColorScheme`](references/usePreferredColorScheme.md) | Reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query | AUTO || [`usePreferredContrast`](references/usePreferredContrast.md) | Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query | AUTO || [`usePreferredDark`](references/usePreferredDark.md) | Reactive dark theme preference | AUTO || [`usePreferredLanguages`](references/usePreferredLanguages.md) | Reactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages) | AUTO || [`usePreferredReducedMotion`](references/usePreferredReducedMotion.md) | Reactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query | AUTO || [`usePreferredReducedTransparency`](references/usePreferredReducedTransparency.md) | Reactive [prefers-reduced-transparency](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) media query | AUTO || [`useScreenOrientation`](references/useScreenOrientation.md) | Reactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API) | AUTO || [`useScreenSafeArea`](references/useScreenSafeArea.md) | Reactive `env(safe-area-inset-*)` | AUTO || [`useScriptTag`](references/useScriptTag.md) | Creates a script tag | AUTO || [`useShare`](references/useShare.md) | Reactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) | AUTO || [`useSSRWidth`](references/useSSRWidth.md) | Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like [`useMediaQuery`](../useMediaQuery/index.md) or [`useBreakpoints`](../useBreakpoints/index.md) | AUTO || [`useStyleTag`](references/useStyleTag.md) | Inject reactive `style` element in head | AUTO || [`useTextareaAutosize`](references/useTextareaAutosize.md) | Automatically update the height of a textarea depending on the content | AUTO || [`useTextDirection`](references/useTextDirection.md) | Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text | AUTO || [`useTitle`](references/useTitle.md) | Reactive document title | AUTO || [`useUrlSearchParams`](references/useUrlSearchParams.md) | Reactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) | AUTO || [`useVibrate`](references/useVibrate.md) | Reactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API) | AUTO || [`useWakeLock`](references/useWakeLock.md) | Reactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API) | AUTO || [`useWebNotification`](references/useWebNotification.md) | Reactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification) | AUTO || [`useWebWorker`](references/useWebWorker.md) | Simple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication | AUTO || [`useWebWorkerFn`](references/useWebWorkerFn.md) | Run expensive functions without blocking the UI | AUTO |### Sensors| Function | Description | Invocation || ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- || [`onClickOutside`](references/onClickOutside.md) | Listen for clicks outside of an element | AUTO || [`onElementRemoval`](references/onElementRemoval.md) | Fires when the element or any element containing it is removed from the DOM | AUTO || [`onKeyStroke`](references/onKeyStroke.md) | Listen for keyboard keystrokes | AUTO || [`onLongPress`](references/onLongPress.md) | Listen for a long press on an element | AUTO || [`onStartTyping`](references/onStartTyping.md) | Fires when users start typing on non-editable elements | AUTO || [`useBattery`](references/useBattery.md) | Reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API) | AUTO || [`useDeviceMotion`](references/useDeviceMotion.md) | Reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent) | AUTO || [`useDeviceOrientation`](references/useDeviceOrientation.md) | Reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent) | AUTO || [`useDevicePixelRatio`](references/useDevicePixelRatio.md) | Reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio) | AUTO || [`useDevicesList`](references/useDevicesList.md) | Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices | AUTO || [`useDisplayMedia`](references/useDisplayMedia.md) | Reactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming | AUTO || [`useElementByPoint`](references/useElementByPoint.md) | Reactive element by point | AUTO || [`useElementHover`](references/useElementHover.md) | Reactive element's hover state | AUTO || [`useFocus`](references/useFocus.md) | Reactive utility to track or set the focus state of a DOM element | AUTO || [`useFocusWithin`](references/useFocusWithin.md) | Reactive utility to track if an element or one of its decendants has focus | AUTO || [`useFps`](references/useFps.md) | Reactive FPS (frames per second) | AUTO || [`useGeolocation`](references/useGeolocation.md) | Reactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) | AUTO || [`useIdle`](references/useIdle.md) | Tracks whether the user is being inactive | AUTO || [`useInfiniteScroll`](references/useInfiniteScroll.md) | Infinite scrolling of the element | AUTO || [`useKeyModifier`](references/useKeyModifier.md) | Reactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) | AUTO || [`useMagicKeys`](references/useMagicKeys.md) | Reactive keys pressed state | AUTO || [`useMouse`](references/useMouse.md) | Reactive mouse position | AUTO || [`useMousePressed`](references/useMousePressed.md) | Reactive mouse pressing state | AUTO || [`useNavigatorLanguage`](references/useNavigatorLanguage.md) | Reactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) | AUTO || [`useNetwork`](references/useNetwork.md) | Reactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API) | AUTO || [`useOnline`](references/useOnline.md) | Reactive online state | AUTO || [`usePageLeave`](references/usePageLeave.md) | Reactive state to show whether the mouse leaves the page | AUTO || [`useParallax`](references/useParallax.md) | Create parallax effect easily | AUTO || [`usePointer`](references/usePointer.md) | Reactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) | AUTO || [`usePointerLock`](references/usePointerLock.md) | Reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API) | AUTO || [`usePointerSwipe`](references/usePointerSwipe.md) | Reactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | AUTO || [`useScroll`](references/useScroll.md) | Reactive scroll position and state | AUTO || [`useScrollLock`](references/useScrollLock.md) | Lock scrolling of the element | AUTO || [`useSpeechRecognition`](references/useSpeechRecognition.md) | Reactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) | AUTO || [`useSpeechSynthesis`](references/useSpeechSynthesis.md) | Reactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) | AUTO || [`useSwipe`](references/useSwipe.md) | Reactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent) | AUTO || [`useTextSelection`](references/useTextSelection.md) | Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection) | AUTO || [`useUserMedia`](references/useUserMedia.md) | Reactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming | AUTO |### Network| Function | Description | Invocation || ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- || [`useEventSource`](references/useEventSource.md) | An [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or [Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) instance opens a persistent connection to an HTTP server | AUTO || [`useFetch`](references/useFetch.md) | Reactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests | AUTO || [`useWebSocket`](references/useWebSocket.md) | Reactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client | AUTO |### Animation| Function | Description | Invocation || ---------------------------------------------- | -------------------------------------------------------------------------------------------------- | ---------- || [`useAnimate`](references/useAnimate.md) | Reactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) | AUTO || [`useInterval`](references/useInterval.md) | Reactive counter that increases on every interval | AUTO || [`useIntervalFn`](references/useIntervalFn.md) | Wrapper for `setInterval` with controls | AUTO || [`useNow`](references/useNow.md) | Reactive current Date instance | AUTO || [`useRafFn`](references/useRafFn.md) | Call function on every `requestAnimationFrame` | AUTO || [`useTimeout`](references/useTimeout.md) | Reactive value that becomes `true` after a given time | AUTO || [`useTimeoutFn`](references/useTimeoutFn.md) | Wrapper for `setTimeout` with controls | AUTO || [`useTimestamp`](references/useTimestamp.md) | Reactive current timestamp | AUTO || [`useTransition`](references/useTransition.md) | Transition between values | AUTO |### Component| Function | Description | Invocation || ---------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------- || [`computedInject`](references/computedInject.md) | Combine `computed` and `inject` | AUTO || [`createReusableTemplate`](references/createReusableTemplate.md) | Define and reuse template inside the component scope | AUTO || [`createTemplatePromise`](references/createTemplatePromise.md) | Template as Promise | AUTO || [`templateRef`](references/templateRef.md) | Shorthand for binding ref to template element | AUTO || [`tryOnBeforeMount`](references/tryOnBeforeMount.md) | Safe `onBeforeMount` | AUTO || [`tryOnBeforeUnmount`](references/tryOnBeforeUnmount.md) | Safe `onBeforeUnmount` | AUTO || [`tryOnMounted`](references/tryOnMounted.md) | Safe `onMounted` | AUTO || [`tryOnScopeDispose`](references/tryOnScopeDispose.md) | Safe `onScopeDispose` | AUTO || [`tryOnUnmounted`](references/tryOnUnmounted.md) | Safe `onUnmounted` | AUTO || [`unrefElement`](references/unrefElement.md) | Retrieves the underlying DOM element from a Vue ref or component instance | AUTO || [`useCurrentElement`](references/useCurrentEl…(truncated)

alexanderop/excalidrawnuxt/tree/main/.agents/skills/vueuse-functions commit f1952add0d

Frequently asked questions

npx skillmds@latest add alexanderop/vueuse-functions