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 URLSearchParams
Component
computedInject
— combine computed and injecttemplateRef
— shorthand for binding ref to template elementtryOnMounted
— safeonMounted
tryOnUnmounted
— safeonUnmounted
unrefElement
— unref for dom elementuseTemplateRefsList
— shorthand for binding refs to template elements and components insidev-for
useVModel
— 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 devicesuseDocumentVisibility
— reactively trackdocument.visibilityState
useElementBounding
— reactive bounding box of an HTML elementuseElementSize
— 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 visibilityuseMagicKeys
— 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 easilyusePointerSwipe
— reactive swipe detection based on PointerEventsuseResizeObserver
— reports changes to the dimensions of an Element's content or the border-boxuseSpeechRecognition
— reactive SpeechRecognitionuseSwipe
— 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 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 hooksextendRef
— add extra attributes to Refget
— shorthand for accessingref.value
makeDestructurable
— 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 objectset
— shorthand forref.value = x
syncRef
— keep target refs in sync with a source reftoRefs
— extendedtoRefs
that also accepts refs of an objectuseAsyncState
— reactive async stateuseCounter
— basic counter with utility functionsuseDebounce
— debounce execution of a ref valueuseDebounceFn
— debounce execution of a functionuseLastChanged
— 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 valueuseThrottleFn
— 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 changeswatchWithFilter
—watch
with additional EventFilter controlwhenever
— shorthand for watching value to be truthy
More functions avaliable in Add-ons.