Functions

useWakeLock - reactive Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running

useWebNotification - reactive Notification

Sensors

onClickOutside - listen for clicks outside of an element

onKeyStroke - listen for keyboard key being stroked

onLongPress - listen for a long press on an element

onStartTyping - fires when users start typing on non-editable elements

useBattery - reactive Battery Status API

useDeviceMotion - reactive DeviceMotionEvent

useDeviceOrientation - reactive DeviceOrientationEvent

useDevicePixelRatio - reactively track window.devicePixelRatio

useDevicesList - reactive enumerateDevices listing avaliable input/output devices

useDisplayMedia - reactive mediaDevices.getDisplayMedia streaming

useElementByPoint - reactive element by point

useElementHover - reactive element's hover state

useFocus - reactive utility to track or set the focus state of a DOM element

useFocusWithin - reactive utility to track if an element or one of its decendants has focus

useFps - reactive FPS (frames per second)

useGeolocation - reactive Geolocation API

useIdle - tracks whether the user is being inactive

useInfiniteScroll - infinite scrolling of the element

useKeyModifier - reactive Modifier State

useMagicKeys - reactive keys pressed state

useMouse - reactive mouse position

useMousePressed - reactive mouse pressing state

useNavigatorLanguage - watch for changes being made to the navigator language preference by the user

useNetwork - reactive Network status

useOnline - reactive online state

usePageLeave - reactive state to show whether the mouse leaves the page

useParallax - create parallax effect easily

usePointer - reactive pointer state

usePointerSwipe - reactive swipe detection based on PointerEvents

useScroll - reactive scroll position and state

useScrollLock - lock scrolling of the element

useSpeechRecognition - reactive SpeechRecognition

useSpeechSynthesis - reactive SpeechSynthesis

useSwipe - reactive swipe detection based on TouchEvents

useTextSelection - reactively track user text selection based on Window.getSelection

useUserMedia - reactive mediaDevices.getUserMedia streaming

Animation

useInterval - reactive counter increases on every interval

useIntervalFn - wrapper for setInterval with controls

useNow - reactive current Date instance

useRafFn - call function on every requestAnimationFrame

useTimeout - update value after a given time with controls

useTimeoutFn - wrapper for setTimeout with controls

useTimestamp - reactive current timestamp

useTransition - transition between values

State

createGlobalState - keep states in the global scope to be reusable across Vue instances

createSharedComposable - make a composable function usable with multiple Vue instances

useAsyncState - reactive async state

useDebouncedRefHistory - shorthand for useRefHistory with debounced filter

useLocalStorage - reactive LocalStorage

useManualRefHistory - manually track the change history of a ref when the using calls commit()

useRefHistory - track the change history of a ref

useSessionStorage - reactive SessionStorage

useStorage - reactive LocalStorage/SessionStorage

useStorageAsync - reactive Storage in with async support

useThrottledRefHistory - shorthand for useRefHistory with throttled filter

Elements

useActiveElement - reactive document.activeElement

useDocumentVisibility - reactively track document.visibilityState

useDraggable - make elements draggable

useElementBounding - reactive bounding box of an HTML element

useElementSize - reactive size of an HTML element

useElementVisibility - tracks the visibility of an element within the viewport

useIntersectionObserver - detects that a target element's visibility

useMouseInElement - reactive mouse position related to an element

useMutationObserver - watch for changes being made to the DOM tree

useResizeObserver - reports changes to the dimensions of an Element's content or the border-box

useWindowFocus - reactively track window focus with window.onfocus and window.onblur events

useWindowScroll - reactive window scroll

useWindowSize - reactive window size

Component

computedInject - combine computed and inject

templateRef - shorthand for binding ref to template element

tryOnBeforeUnmount - safe onBeforeUnmount

tryOnMounted - safe onMounted

tryOnScopeDispose - safe onScopeDispose

tryOnUnmounted - safe onUnmounted

unrefElement - unref for dom element

useMounted - mounted state in ref

useTemplateRefsList - shorthand for binding refs to template elements and components inside v-for

useVirtualList - create virtual lists with ease

useVModel - shorthand for v-model binding

useVModels - shorthand for props v-model binding

Watch

debouncedWatch - debounced watch

ignorableWatch - ignorable watch

pausableWatch - pausable watch

throttledWatch - throttled watch

until - promised one-time watch for changes

watchAtMost - watch with the number of times triggered

watchOnce - watch that only triggers once

watchWithFilter - watch with additional EventFilter control

whenever - shorthand for watching value to be truthy

Network

useEventSource - an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server

useFetch - reactive Fetch API provides the ability to abort requests

useWebSocket - reactive WebSocket client

Utilities

and - AND condition for refs

asyncComputed - computed for async functions

autoResetRef - a ref which will be reset to the default value after some time

biSyncRef - two-way refs synchronization

controlledComputed - explicitly define the deps of computed

controlledRef - fine-grained controls over ref and its reactivity

createEventHook - utility for creating event hooks

createReactiveFn - converts plain functions into reactive functions

createUnrefFn - make a plain function accepting ref and raw values as arguments

debouncedRef - debounce updates of a ref

eagerComputed - eager computed without lazy evaluation

extendRef - add extra attributes to Ref

get - shorthand for accessing ref.value

isDefined - non-nullish checking type guard for Ref

makeDestructurable - make isomorphic destructurable for object and array at the same time

not - NOT condition for ref

or - OR conditions for refs

reactify - converts plain functions into reactive functions

reactifyObject - apply reactify to an object

reactiveComputed - computed reactive object

reactiveOmit - reactively omit fields from a reactive object

reactivePick - reactively pick fields from a reactive object

refDefault - apply default value to a ref

set - shorthand for ref.value = x

syncRef - keep target refs in sync with a source ref

throttledRef - throttle updates of a ref

toReactive - converts ref to reactive

toRefs - extended toRefs that also accepts refs of an object

useAsyncQueue - executes each asynchronous task sequentially and passed the current task result to the next task

useBase64 - reactive base64 transforming

useCached - cache a ref with a custom comparator

useClamp - reactively clamp a value between two other values

useConfirmDialog - creates event hooks to support modals and confirmation dialog chains

useCounter - basic counter with utility functions

useCycleList - cycle through a list of items

useDebounce - debounce execution of a ref value

useDebounceFn - debounce execution of a function

useEventBus - a basic event bus

useLastChanged - records the timestamp of the last change

useMemoize - cache results of functions depending on arguments and keep it reactive

useOffsetPagination - reactive offset pagination

useThrottle - throttle changing of a ref value

useThrottleFn - throttle execution of a function

useToggle - a boolean switcher with utility functions

Misc

useTimeAgo - reactive time ago

useWebWorker - simple Web Workers registration and communication

useWebWorkerFn - run expensive functions without blocking the UI

@Electron

useIpcRenderer - provides ipcRenderer and it's all APIs

useIpcRendererInvoke - reactive ipcRenderer.invoke API result

useIpcRendererOn - use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted

useZoomFactor - reactive WebFrame zoom factor

useZoomLevel - reactive WebFrame zoom level

@Firebase

useAuth - reactive Firebase Auth binding

useFirestore - reactive Firestore binding

useRTDB - reactive Firebase Realtime Database binding

@Head

createHead - create the head manager instance.

useHead - update head meta tags reactively.

@Integrations

useAxios - wrapper for axios

useCookies - wrapper for universal-cookie

useDrauu - reactive instance for drauu

useFocusTrap - reactive wrapper for focus-trap

useFuse - easily implement fuzzy search using a composable on top of the zero-dependency library Fuse.js

useJwt - wrapper for jwt-decode

useNProgress - reactive wrapper for nprogress

useQRCode - wrapper for qrcode

@Motion

useElementStyle - sync a reactive object to a target element CSS styling

useElementTransform - sync a reactive object to a target element CSS transform.

useMotion - putting your components in motion.

useMotionProperties - access Motion Properties for a target element.

useMotionVariants - handle the Variants state and selection.

useSpring - spring animations.

@Router

useRouteHash - shorthand for reactive route.hash

useRouteQuery - shorthand for reactive route.query

@RxJS

from - / fromEvent

toObserver - sugar function to convert a ref in an observer

useObservable - use an Observable

useSubject - bind Subject to ref and propagate value changes both ways

useSubscription - uses subscriptions without worry about unsubscribing to it or memory leaks

@Sound

useSound - play sound effects reactively.

Functions #

Browser