vueuse-functions

name	vueuse-functions
description	Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
license	MIT
metadata	{"author":"SerKo <https://github.com/serkodev>","version":"1.0"}
compatibility	Requires Vue 3 (or above) or Nuxt 3 (or above) project

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 user calls commit()	AUTO
useRefHistory	Track the change history of a ref	AUTO
useSessionStorage	Reactive SessionStorage

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
useElementOverflow	Reactive element's overflow state	AUTO
useElementSize	Reactive size of an HTML element	AUTO
useElementVisibility	Tracks the visibility of an element within the viewport	AUTO
useIntersectionObserver	Detects changes to 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

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

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

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	Get the DOM element of current component as a ref	AUTO
useMounted	Mounted state in ref	AUTO
useTemplateRefsList	Shorthand for binding refs to template elements and components inside v-for	AUTO

Watch

Function	Description	Invocation
until	Promised one-time watch for changes	AUTO
watchArray	Watch for an array with additions and removals	AUTO
watchAtMost	watch with the number of times triggered	AUTO
watchDebounced	Debounced watch	AUTO
watchDeep	Shorthand for watching value with {deep: true}	AUTO
watchIgnorable	Ignorable watch	AUTO
watchImmediate	Shorthand for watching value with {immediate: true}	AUTO
watchOnce	Shorthand for watching value with { once: true }	AUTO
watchPausable	Pausable watch	AUTO
watchThrottled	Throttled watch	AUTO
watchTriggerable	Watch that can be triggered manually	AUTO
watchWithFilter	watch with additional EventFilter control	AUTO
whenever	Shorthand for watching value to be truthy	AUTO

Reactivity

Function	Description	Invocation
computedAsync	Computed for async functions	AUTO
computedEager	Eager computed without lazy evaluation	AUTO
computedWithControl	Explicitly define the dependencies of computed	AUTO
createRef	Returns a deepRef or shallowRef depending on the deep param	AUTO
extendRef	Add extra attributes to Ref	AUTO
reactify	Converts plain functions into reactive functions	AUTO
reactifyObject	Apply reactify to an object	AUTO
reactiveComputed	Computed reactive object	AUTO
reactiveOmit	Reactively omit fields from a reactive object	AUTO
reactivePick	Reactively pick fields from a reactive object	AUTO
refAutoReset	A ref which will be reset to the default value after some time	AUTO
refDebounced	Debounce execution of a ref value	AUTO
refDefault	Apply default value to a ref	AUTO
refManualReset	Create a ref with manual reset functionality

Array

Function	Description	Invocation
useArrayDifference	Reactive get array difference of two arrays	AUTO
useArrayEvery	Reactive Array.every	AUTO
useArrayFilter	Reactive Array.filter	AUTO
useArrayFind	Reactive Array.find	AUTO
useArrayFindIndex	Reactive Array.findIndex	AUTO
useArrayFindLast	Reactive Array.findLast	AUTO
useArrayIncludes	Reactive Array.includes	AUTO
useArrayJoin	Reactive Array.join	AUTO
useArrayMap	Reactive Array.map	AUTO
useArrayReduce	Reactive Array.reduce	AUTO
useArraySome	Reactive Array.some	AUTO
useArrayUnique	Reactive unique array	AUTO
useSorted	Reactive sort array	AUTO

Time

Function	Description	Invocation
useCountdown	Reactive countdown timer in seconds	AUTO
useDateFormat	Get the formatted date according to the string of tokens passed in	AUTO
useTimeAgo	Reactive time ago	AUTO
useTimeAgoIntl	Reactive time ago with i18n supported	AUTO

Utilities

Function	Description	Invocation
createDisposableDirective	Utility for authoring disposable directives	AUTO
createEventHook	Utility for creating event hooks	AUTO
createUnrefFn	Make a plain function accepting ref and raw values as arguments	AUTO
get	Shorthand for accessing ref.value	EXPLICIT_ONLY
isDefined	Non-nullish checking type guard for Ref	AUTO
makeDestructurable	Make isomorphic destructurable for object and array at the same time	AUTO
set	Shorthand for ref.value = x	EXPLICIT_ONLY
useAsyncQueue	Executes each asynchronous task sequentially and passes the current task result to the next task	AUTO
useBase64	Reactive base64 transforming	AUTO
useCached	Cache a ref with a custom comparator	AUTO
useCloned	Reactive clone of a ref	AUTO
useConfirmDialog	Creates event hooks to support modals and confirmation dialog chains	AUTO
useCounter	Basic counter with utility functions	AUTO
useCycleList	Cycle through a list of items

@Electron

Function	Description	Invocation
useIpcRenderer	Provides ipcRenderer and all of its APIs with Vue reactivity	EXTERNAL
useIpcRendererInvoke	Reactive ipcRenderer.invoke API result	EXTERNAL
useIpcRendererOn	Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted	EXTERNAL
useZoomFactor	Reactive WebFrame zoom factor	EXTERNAL
useZoomLevel	Reactive WebFrame zoom level	EXTERNAL

@Firebase

Function	Description	Invocation
useAuth	Reactive Firebase Auth binding	EXTERNAL
useFirestore	Reactive Firestore binding	EXTERNAL
useRTDB	Reactive Firebase Realtime Database binding	EXTERNAL

@Head

Function	Description	Invocation
createHead	Create the head manager instance.	EXTERNAL
useHead	Update head meta tags reactively.	EXTERNAL

@Integrations

Function	Description	Invocation
useAsyncValidator	Wrapper for async-validator	EXTERNAL
useAxios	Wrapper for axios	EXTERNAL
useChangeCase	Reactive wrapper for change-case	EXTERNAL
useCookies	Wrapper for universal-cookie	EXTERNAL
useDrauu	Reactive instance for drauu	EXTERNAL
useFocusTrap	Reactive wrapper for focus-trap	EXTERNAL
useFuse	Easily implement fuzzy search using a composable with Fuse.js	EXTERNAL
useIDBKeyval	Wrapper for idb-keyval	EXTERNAL
useJwt	Wrapper for jwt-decode	EXTERNAL
useNProgress	Reactive wrapper for nprogress	EXTERNAL
useQRCode	Wrapper for

@Math

Function	Description	Invocation
createGenericProjection	Generic version of createProjection	EXTERNAL
createProjection	Reactive numeric projection from one domain to another	EXTERNAL
logicAnd	AND condition for refs	EXTERNAL
logicNot	NOT condition for ref	EXTERNAL
logicOr	OR conditions for refs	EXTERNAL
useAbs	Reactive Math.abs	EXTERNAL
useAverage	Get the average of an array reactively	EXTERNAL
useCeil	Reactive Math.ceil	EXTERNAL
useClamp	Reactively clamp a value between two other values	EXTERNAL
useFloor	Reactive Math.floor	EXTERNAL
useMath	Reactive Math methods	EXTERNAL
useMax	Reactive Math.max	EXTERNAL
useMin	Reactive Math.min	EXTERNAL
usePrecision	Reactively set the precision of a number

@Motion

Function	Description	Invocation
useElementStyle	Sync a reactive object to a target element CSS styling	EXTERNAL
useElementTransform	Sync a reactive object to a target element CSS transform.	EXTERNAL
useMotion	Putting your components in motion.	EXTERNAL
useMotionProperties	Access Motion Properties for a target element.	EXTERNAL
useMotionVariants	Handle the Variants state and selection.	EXTERNAL
useSpring	Spring animations.	EXTERNAL

@Router

Function	Description	Invocation
useRouteHash	Shorthand for a reactive route.hash	EXTERNAL
useRouteParams	Shorthand for a reactive route.params	EXTERNAL
useRouteQuery	Shorthand for a reactive route.query	EXTERNAL

@RxJS

Function	Description	Invocation
from	Wrappers around RxJS's from() and fromEvent() to allow them to accept refs	EXTERNAL
toObserver	Sugar function to convert a ref into an RxJS Observer	EXTERNAL
useExtractedObservable	Use an RxJS Observable as extracted from one or more composables	EXTERNAL
useObservable	Use an RxJS Observable	EXTERNAL
useSubject	Bind an RxJS Subject to a ref and propagate value changes both ways	EXTERNAL
useSubscription	Use an RxJS Subscription without worrying about unsubscribing from it or creating memory leaks	EXTERNAL
watchExtractedObservable	Watch the values of an RxJS Observable as extracted from one or more composables	EXTERNAL

@SchemaOrg

Function	Description	Invocation
createSchemaOrg	Create the schema.org manager instance.	EXTERNAL
useSchemaOrg	Update schema.org reactively.	EXTERNAL

@Sound

Function	Description	Invocation
useSound	Play sound effects reactively.	EXTERNAL