---

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 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 | 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 | 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 | |----------|-------------|------------| | 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 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 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 |