VueUse

Collection of Essential Vue Composition Utilities.

On this page

Functions

Animation

useAnimatereactive [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
useIntervalreactive counter increases on every interval
useIntervalFnwrapper for `setInterval` with controls
useNowreactive current Date instance
useRafFncall function on every `requestAnimationFrame`
useTimeoutupdate value after a given time with controls
useTimeoutFnwrapper for `setTimeout` with controls
useTimestampreactive current timestamp
useTransitiontransition between values

Array

useArrayDifferencereactive get array difference of two arrays
useArrayEveryreactive `Array.every`
useArrayFilterreactive `Array.filter`
useArrayFindreactive `Array.find`
useArrayFindIndexreactive `Array.findIndex`
useArrayFindLastreactive `Array.findLast`
useArrayIncludesreactive `Array.includes`
useArrayJoinreactive `Array.join`
useArrayMapreactive `Array.map`
useArrayReducereactive `Array.reduce`
useArraySomereactive `Array.some`
useArrayUniquereactive unique array
useSortedreactive sort array

Browser

useBluetoothreactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API)
useBreakpointsreactive viewport breakpoints
useBroadcastChannelreactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel)
useBrowserLocationreactive browser location
useClipboardreactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
useClipboardItemsreactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
useColorModereactive color mode (dark / light / customs) with auto data persistence
useCssVarmanipulate CSS variables
useDarkreactive dark mode with auto data persistence
useEventListeneruse EventListener with ease
useEyeDropperreactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
useFaviconreactive favicon
useFileDialogopen file dialog with ease
useFileSystemAccesscreate and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API)
useFullscreenreactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
useGamepadprovides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API)
useImagereactive load an image in the browser
useMediaControlsreactive media controls for both `audio` and `video` elements
useMediaQueryreactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries)
useMemoryreactive Memory Info
useObjectUrlreactive URL representing an object
usePerformanceObserverobserve performance metrics
usePermissionreactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
usePreferredColorSchemereactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query
usePreferredContrastreactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query
usePreferredDarkreactive dark theme preference
usePreferredLanguagesreactive [Navigator Languages](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/languages)
usePreferredReducedMotionreactive [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query
useScreenOrientationreactive [Screen Orientation API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Orientation_API)
useScreenSafeAreareactive `env(safe-area-inset-*)`
useScriptTagcreates a script tag
useSharereactive [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)
useStyleTaginject reactive `style` element in head
useTextareaAutosizeautomatically update the height of a textarea depending on the content
useTextDirectionreactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text
useTitlereactive document title
useUrlSearchParamsreactive [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
useVibratereactive [Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
useWakeLockreactive [Screen Wake Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API)
useWebNotificationreactive [Notification](https://developer.mozilla.org/en-US/docs/Web/API/notification)
useWebWorkersimple [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) registration and communication
useWebWorkerFnrun expensive functions without blocking the UI

Component

computedInjectcombine computed and inject
createReusableTemplatedefine and reuse template inside the component scope
createTemplatePromisetemplate as Promise
templateRefshorthand for binding ref to template element
tryOnBeforeMountsafe `onBeforeMount`
tryOnBeforeUnmountsafe `onBeforeUnmount`
tryOnMountedsafe `onMounted`
tryOnScopeDisposesafe `onScopeDispose`
tryOnUnmountedsafe `onUnmounted`
unrefElementretrieves the underlying DOM element from a Vue ref or component instance
useCurrentElementget the DOM element of current component as a ref
useMountedmounted state in ref
useTemplateRefsListshorthand for binding refs to template elements and components inside `v-for`
useVirtualListcreate virtual lists with ease
useVModelshorthand for v-model binding
useVModelsshorthand for props v-model binding

Elements

useActiveElementreactive `document.activeElement`
useDocumentVisibilityreactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState)
useDraggablemake elements draggable
useDropZonecreate a zone where files can be dropped
useElementBoundingreactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
useElementSizereactive size of an HTML element
useElementVisibilitytracks the visibility of an element within the viewport
useIntersectionObserverdetects that a target element's visibility
useMouseInElementreactive mouse position related to an element
useMutationObserverwatch for changes being made to the DOM tree
useParentElementget parent element of the given element
useResizeObserverreports changes to the dimensions of an Element's content or the border-box
useWindowFocusreactively track window focus with `window.onfocus` and `window.onblur` events
useWindowScrollreactive window scroll
useWindowSizereactive window size

Network

useEventSourcean [EventSource](https://developer.mozilla.org/en-US/docs/Web/API/EventSource) or [Server-Sent-Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) instance opens a persistent connection to an HTTP server
useFetchreactive [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provides the ability to abort requests
useWebSocketreactive [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket) client

Reactivity

computedAsynccomputed for async functions
computedEagereager computed without lazy evaluation
computedWithControlexplicitly define the dependencies of computed
extendRefadd extra attributes to Ref
reactifyconverts plain functions into reactive functions
reactifyObjectapply `reactify` to an object
reactiveComputedcomputed reactive object
reactiveOmitreactively omit fields from a reactive object
reactivePickreactively pick fields from a reactive object
refAutoReseta ref which will be reset to the default value after some time
refDebounceddebounce execution of a ref value
refDefaultapply default value to a ref
refThrottledthrottle changing of a ref value
refWithControlfine-grained controls over ref and its reactivity
syncReftwo-way refs synchronization
syncRefskeep target refs in sync with a source ref
toReactiveconverts ref to reactive
toRefnormalize value/ref/getter to `ref` or `computed`
toRefsextended [`toRefs`](https://v3.vuejs.org/api/refs-api.html#torefs) that also accepts refs of an object
toValueget the value of value/ref/getter

Sensors

onClickOutsidelisten for clicks outside of an element
onKeyStrokelisten for keyboard keystrokes
onLongPresslisten for a long press on an element
onStartTypingfires when users start typing on non-editable elements
useBatteryreactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)
useDeviceMotionreactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)
useDeviceOrientationreactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
useDevicePixelRatioreactively track [`window.devicePixelRatio`](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio)
useDevicesListreactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices
useDisplayMediareactive [`mediaDevices.getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) streaming
useElementByPointreactive element by point
useElementHoverreactive element's hover state
useFocusreactive utility to track or set the focus state of a DOM element
useFocusWithinreactive utility to track if an element or one of its decendants has focus
useFpsreactive FPS (frames per second)
useGeolocationreactive [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
useIdletracks whether the user is being inactive
useInfiniteScrollinfinite scrolling of the element
useKeyModifierreactive [Modifier State](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState)
useMagicKeysreactive keys pressed state
useMousereactive mouse position
useMousePressedreactive mouse pressing state
useNavigatorLanguagereactive [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language)
useNetworkreactive [Network status](https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API)
useOnlinereactive online state
usePageLeavereactive state to show whether the mouse leaves the page
useParallaxcreate parallax effect easily
usePointerreactive [pointer state](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
usePointerLockreactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API)
usePointerSwipereactive swipe detection based on [PointerEvents](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)
useScrollreactive scroll position and state
useScrollLocklock scrolling of the element
useSpeechRecognitionreactive [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition)
useSpeechSynthesisreactive [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
useSwipereactive swipe detection based on [`TouchEvents`](https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent)
useTextSelectionreactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection)
useUserMediareactive [`mediaDevices.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) streaming

State

createGlobalStatekeep states in the global scope to be reusable across Vue instances
createInjectionStatecreate global state that can be injected into components
createSharedComposablemake a composable function usable with multiple Vue instances
injectLocalextended `inject` with ability to call `provideLocal` to provide the value in the same component
provideLocalextended `provide` with ability to call `injectLocal` to obtain the value in the same component
useAsyncStatereactive async state
useDebouncedRefHistoryshorthand for `useRefHistory` with debounced filter
useLastChangedrecords the timestamp of the last change
useLocalStoragereactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
useManualRefHistorymanually track the change history of a ref when the using calls `commit()`
useRefHistorytrack the change history of a ref
useSessionStoragereactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
useStoragecreate a reactive ref that can be used to access & modify [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
useStorageAsyncreactive Storage in with async support
useThrottledRefHistoryshorthand for `useRefHistory` with throttled filter

Time

useDateFormatget the formatted date according to the string of tokens passed in
useTimeAgoreactive time ago

Utilities

createEventHookutility for creating event hooks
createUnrefFnmake a plain function accepting ref and raw values as arguments
getshorthand for accessing `ref.value`
isDefinednon-nullish checking type guard for Ref
makeDestructurablemake isomorphic destructurable for object and array at the same time
setshorthand for `ref.value = x`
useAsyncQueueexecutes each asynchronous task sequentially and passes the current task result to the next task
useBase64reactive base64 transforming
useCachedcache a ref with a custom comparator
useClonedreactive clone of a ref
useConfirmDialogcreates event hooks to support modals and confirmation dialog chains
useCounterbasic counter with utility functions
useCycleListcycle through a list of items
useDebounceFndebounce execution of a function
useEventBusa basic event bus
useMemoizecache results of functions depending on arguments and keep it reactive
useOffsetPaginationreactive offset pagination
usePreviousholds the previous value of a ref
useStepperprovides helpers for building a multi-step wizard interface
useSupportedsSR compatibility `isSupported`
useThrottleFnthrottle execution of a function
useTimeoutPolluse timeout to poll something
useTogglea boolean switcher with utility functions
useToNumberreactively convert a string ref to number
useToStringreactively convert a ref to string

Watch

untilpromised one-time watch for changes
watchArraywatch for an array with additions and removals
watchAtMost`watch` with the number of times triggered
watchDebounceddebounced watch
watchDeepshorthand for watching value with `{deep: true}`
watchIgnorableignorable watch
watchImmediateshorthand for watching value with `{immediate: true}`
watchOnce`watch` that only triggers once
watchPausablepausable watch
watchThrottledthrottled watch
watchTriggerablewatch that can be triggered manually
watchWithFilter`watch` with additional EventFilter control
whenevershorthand for watching value to be truthy
On this page