Vueuse Functions

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](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 | AUTO | | [useManualRefHistory](references/useManualRefHistory.md) | Manually track the change history of a ref when the user calls commit() | AUTO | | [useRefHistory](references/useRefHistory.md) | Track the change history of a ref | AUTO | | [useSessionStorage](references/useSessionStorage.md) | Reactive SessionStorage | AUTO | | [useStorage](references/useStorage.md) | Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage | AUTO | | [useStorageAsync](references/useStorageAsync.md) | Reactive Storage 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 | 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 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 changes to 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 | AUTO | | [useBreakpoints](references/useBreakpoints.md) | Reactive viewport breakpoints | AUTO | | [useBroadcastChannel](references/useBroadcastChannel.md) | Reactive BroadcastChannel API | AUTO | | [useBrowserLocation](references/useBrowserLocation.md) | Reactive browser location | AUTO | | [useClipboard](references/useClipboard.md) | Reactive Clipboard API | AUTO | | [useClipboardItems](references/useClipboardItems.md) | Reactive 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 | 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 | 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 | AUTO | | [useFullscreen](references/useFullscreen.md) | Reactive Fullscreen API | AUTO | | [useGamepad](references/useGamepad.md) | Provides reactive bindings for the 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 | 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 | AUTO | | [usePreferredColorScheme](references/usePreferredColorScheme.md) | Reactive prefers-color-scheme media query | AUTO | | [usePreferredContrast](references/usePreferredContrast.md) | Reactive prefers-contrast media query | AUTO | | [usePreferredDark](references/usePreferredDark.md) | Reactive dark theme preference | AUTO | | [usePreferredLanguages](references/usePreferredLanguages.md) | Reactive Navigator Languages | AUTO | | [usePreferredReducedMotion](references/usePreferredReducedMotion.md) | Reactive prefers-reduced-motion media query | AUTO | | [usePreferredReducedTransparency](references/usePreferredReducedTransparency.md) | Reactive prefers-reduced-transparency media query | AUTO | | [useScreenOrientation](references/useScreenOrientation.md) | Reactive 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 | 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 of the element's text | AUTO | | [useTitle](references/useTitle.md) | Reactive document title | AUTO | | [useUrlSearchParams](references/useUrlSearchParams.md) | Reactive URLSearchParams | AUTO | | [useVibrate](references/useVibrate.md) | Reactive Vibration API | AUTO | | [useWakeLock](references/useWakeLock.md) | Reactive Screen Wake Lock API | AUTO | | [useWebNotification](references/useWebNotification.md) | Reactive Notification | AUTO | | [useWebWorker](references/useWebWorker.md) | Simple 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 | AUTO | | [useDeviceMotion](references/useDeviceMotion.md) | Reactive DeviceMotionEvent | AUTO | | [useDeviceOrientation](references/useDeviceOrientation.md) | Reactive DeviceOrientationEvent | AUTO | | [useDevicePixelRatio](references/useDevicePixelRatio.md) | Reactively track window.devicePixelRatio | AUTO | | [useDevicesList](references/useDevicesList.md) | Reactive enumerateDevices listing available input/output devices | AUTO | | [useDisplayMedia](references/useDisplayMedia.md) | Reactive 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 descendants has focus | AUTO | | [useFps](references/useFps.md) | Reactive FPS (frames per second) | AUTO | | [useGeolocation](references/useGeolocation.md) | Reactive 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 | 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 | AUTO | | [useNetwork](references/useNetwork.md) | Reactive Network status | 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 | AUTO | | [usePointerLock](references/usePointerLock.md) | Reactive pointer lock

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: zhengyuzi
• Source: zhengyuzi/skills
• License: MIT

Install and usage instructions live in the source repository linked above.