TIP
Core Functions
Animation
useInterval
— reactive counter increases on every intervaluseIntervalFn
— wrapper forsetInterval
with controlsuseNow
— reactive current Date instanceuseRafFn
— call function on everyrequestAnimationFrame
useTimeout
— update value after a given time with controlsuseTimeoutFn
— wrapper forsetTimeout
with controlsuseTimestamp
— reactive current timestampuseTransition
— transition between values
Browser
useActiveElement
— reactivedocument.activeElement
useBreakpoints
— reactive viewport breakpointsuseBrowserLocation
— reactive browser locationuseClipboard
— reactive Clipboard APIuseCssVar
— manipulate CSS variablesuseDark
— reactive dark mode with auto data persistenceuseEventListener
— use EventListener with easeuseFavicon
— reactive faviconuseFetch
— reactive Fetch API provides the ability to abort requestsuseFullscreen
— reactive Fullscreen APIuseMediaControls
— reactive media controls for bothaudio
andvideo
elementsuseMediaQuery
— reactive Media QueryusePermission
— reactive Permissions APIusePreferredColorScheme
— reactive prefers-color-scheme media queryusePreferredDark
— reactive dark theme preferenceusePreferredLanguages
— reactive Navigator LanguagesuseScriptTag
— script tag injectinguseShare
— reactive Web Share APIuseTitle
— reactive document titleuseUrlSearchParams
— reactive URLSearchParamsuseWakeLock
— reactive Screen Wake Lock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running
Component
computedInject
— combine computed and injecttemplateRef
— shorthand for binding ref to template elementtryOnBeforeUnmount
— safeonBeforeUnmount
tryOnMounted
— safeonMounted
tryOnScopeDispose
— safeonScopeDispose
tryOnUnmounted
— safeonUnmounted
unrefElement
— unref for dom elementuseTemplateRefsList
— shorthand for binding refs to template elements and components insidev-for
useVirtualList
— composable virtual listuseVModel
— shorthand for v-model bindinguseVModels
— shorthand for props v-model binding
Formatters
useTimeAgo
— reactive time ago
Misc
useEventSource
— an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP serveruseWebSocket
— reactive WebSocket clientuseWebWorker
— simple Web Workers registration and communicationuseWebWorkerFn
— run expensive function without blocking the UI
Sensors
onClickOutside
— listen for clicks outside of an elementonKeyStroke
— listen for keyboard key being strokedonStartTyping
— fires when users start typing on non-editable elementsuseBattery
— reactive Battery Status APIuseDeviceMotion
— reactive DeviceMotionEventuseDeviceOrientation
— reactive DeviceOrientationEventuseDevicePixelRatio
— reactively trackwindow.devicePixelRatio
useDevicesList
— reactive enumerateDevices listing avaliable input/output devicesuseDisplayMedia
— reactivemediaDevices.getDisplayMedia
streaminguseDocumentVisibility
— reactively trackdocument.visibilityState
useDraggable
— make elements draggableuseElementBounding
— reactive bounding box of an HTML elementuseElementHover
— reactive element's hover stateuseElementSize
— reactive size of an HTML elementuseElementVisibility
— tracks the visibility of an element within the viewportuseGeolocation
— reactive Geolocation APIuseIdle
— tracks whether the user is being inactiveuseIntersectionObserver
— detects that a target element's visibilityuseKeyModifier
— reactive Modifier StateuseMagicKeys
— reactive keys pressed stateuseMouse
— reactive mouse positionuseMouseInElement
— reactive mouse position related to an elementuseMousePressed
— reactive mouse pressing stateuseMutationObserver
— watch for changes being made to the DOM treeuseNetwork
— reactive Network statususeOnline
— reactive online stateusePageLeave
— reactive state to show whether the mouse leaves the pageuseParallax
— create parallax effect easilyusePointer
— reactive pointer stateusePointerSwipe
— reactive swipe detection based on PointerEventsuseResizeObserver
— reports changes to the dimensions of an Element's content or the border-boxuseScroll
— reactive scroll position and stateuseSpeechRecognition
— reactive SpeechRecognitionuseSpeechSynthesis
— reactive SpeechSynthesisuseSwipe
— reactive swipe detection based onTouchEvents
useUserMedia
— reactivemediaDevices.getUserMedia
streaminguseWindowFocus
— reactively track window focus withwindow.onfocus
andwindow.onblur
eventsuseWindowScroll
— reactive window scrolluseWindowSize
— reactive window size
State
createGlobalState
— keep states in the global scope to be reusable across Vue instancescreateSharedComposable
— make a composable function usable with multiple Vue instancesuseLocalStorage
— reactive LocalStorageuseSessionStorage
— reactive SessionStorageuseStorage
— reactive LocalStorage/SessionStorage
Utilities
and
—AND
condition for refsasyncComputed
— computed for async functionsautoResetRef
— a ref which will be reset to the default value after some timebiSyncRef
— two-way refs synchronizationcontrolledComputed
— explicitly define the deps of computedcontrolledRef
— fine-grained controls over ref and its reactivitycreateEventHook
— utility for creating event hookseagerComputed
— eager computed without lazy evaluationextendRef
— add extra attributes to Refget
— shorthand for accessingref.value
isDefined
— non-nullish checking type guard for RefmakeDestructurable
— make isomorphic destructurable for object and array at the same timenot
—NOT
condition for refor
—OR
conditions for refsreactify
— converts plain functions into reactive functionsreactifyObject
— applyreactify
to an objectreactivePick
— reactively pick fields from a reactive objectrefDefault
— apply default value to a refset
— shorthand forref.value = x
syncRef
— keep target refs in sync with a source reftoReactive
— converts ref to reactivetoRefs
— extendedtoRefs
that also accepts refs of an objectuseAsyncState
— reactive async stateuseConfirmDialog
— creates event hooks to support modals and confirmation dialog chainsuseCounter
— basic counter with utility functionsuseDebounce
— debounce execution of a ref valueuseDebouncedRefHistory
— shorthand foruseRefHistory
with debounced filteruseDebounceFn
— debounce execution of a functionuseEventBus
— a basic event bususeLastChanged
— records the timestamp of the last changeuseManualRefHistory
— manually track the change history of a ref when the using callscommit()
useRefHistory
— track the change history of a refuseThrottle
— throttle changing of a ref valueuseThrottledRefHistory
— shorthand foruseRefHistory
with throttled filteruseThrottleFn
— throttle execution of a functionuseToggle
— a boolean switcher with utility functions
Watch
debouncedWatch
— debounced watchignorableWatch
— ignorable watchpausableWatch
— pausable watchthrottledWatch
— throttled watchuntil
— promised one-time watch for changeswatchAtMost
—watch
with the number of times triggeredwatchOnce
—watch
that only triggers oncewatchWithFilter
—watch
with additional EventFilter controlwhenever
— shorthand for watching value to be truthy
More functions avaliable in Add-ons.