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

<!-- Content truncated for initial SEO render. Open the source file tab for the full file. -->