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.1"}
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 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
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	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 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	Update value after a given time with controls	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
useVirtualList	Create virtual lists with ease	AUTO
useVModel	Shorthand for v-model binding	AUTO
useVModels	Shorthand for props v-model binding	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	AUTO
refThrottled	Throttle changing of a ref value	AUTO
refWithControl	Fine-grained controls over ref and its reactivity	AUTO
syncRef	Two-way refs synchronization	AUTO
syncRefs	Keep target refs in sync with a source ref	AUTO
toReactive	Converts ref to reactive	AUTO
toRef	Normalize value/ref/getter to ref or computed	EXPLICIT_ONLY
toRefs	Extended toRefs that also accepts refs of an object	AUTO

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	Wrapper for useIntervalFn that provides a countdown timer	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
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	AUTO
useDebounceFn	Debounce execution of a function	AUTO
useEventBus	A basic event bus	AUTO
useMemoize	Cache results of functions depending on arguments and keep it reactive	AUTO
useOffsetPagination	Reactive offset pagination	AUTO
usePrevious	Holds the previous value of a ref	AUTO
useStepper	Provides helpers for building a multi-step wizard interface	AUTO
useSupported	SSR compatibility isSupported	AUTO
useThrottleFn	Throttle execution of a function	AUTO
useTimeoutPoll	Use timeout to poll something	AUTO
useToggle	A boolean switcher with utility functions	AUTO
useToNumber	Reactively convert a string ref to number	AUTO
useToString	Reactively convert a ref to string	AUTO

@Electron

Function	Description	Invocation
useIpcRenderer	Provides ipcRenderer and all of its APIs	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 qrcode	EXTERNAL
useSortable	Wrapper for sortable	EXTERNAL

@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	EXTERNAL
useProjection	Reactive numeric projection from one domain to another	EXTERNAL
useRound	Reactive Math.round	EXTERNAL
useSum	Get the sum of an array reactively	EXTERNAL
useTrunc	Reactive Math.trunc	EXTERNAL

@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