Core Functions
Animation
useInterval
— reactive counter increases on every intervaluseIntervalFn
— wrapper forsetInterval
with controlsuseRafFn
— call function on everyrequestAnimationFrame
useTimeout
— update value after a given time with controlsuseTimeoutFn
— wrapper forsetTimeout
with controlsuseTimestamp
— reactive current timestampuseTransition
— transition between values
Browser
useBrowserLocation
— reactive browser locationuseClipboard
— reactive Clipboard APIuseCssVar
— manipulate CSS variablesuseEventListener
— use EventListener with easeuseFavicon
— reactive faviconuseFullscreen
— reactive Fullscreen APIuseMediaQuery
— 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
templateRef
— shorthand for binding ref to template elementtryOnMounted
— safeonMounted
tryOnUnmounted
— safeonUnmounted
useVModel
— shorthand for v-model binding
Misc
useEventSource
— an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP serveruseWebSocket
— reactive simple WebSocket clientuseWebWorker
— simple Web Workers registration and communicationuseWebWorkerFn
— run expensive function without blocking the UI
Sensors
onClickOutside
— listen for clicks outside of an elementonStartTyping
— fires when users start typing on non-editable elementsuseBattery
— reactive Battery Status APIuseDeviceLight
— reactive DeviceLightEventuseDeviceMotion
— reactive DeviceMotionEventuseDeviceOrientation
— reactive DeviceOrientationEventuseDevicePixelRatio
— reactively trackwindow.devicePixelRatio
useDocumentVisibility
— 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 visibilityuseMouse
— 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 easilyuseResizeObserver
— reports changes to the dimensions of an Element's content or the border-boxuseSpeechRecognition
— reactive SpeechRecognitionuseWindowScroll
— 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
asyncComputed
— computed for async functionsbiSyncRef
— two-way refs synchronizationcontrolledComputed
— explicitly define the deps of computedextendRef
— add extra attributes to Refget
— shorthand for accessingref.value
makeDestructurable
— make isomorphic destructurable for object and array at the same timereactify
— converts plain functions into reactive functionsreactifyObject
— applyreactify
to an objectset
— shorthand forref.value = x
syncRef
— keep target refs in sync with a source refuseAsyncState
— reactive async stateuseCounter
— basic counter with utility functionsuseDebounce
— debounce execution of a ref valueuseDebounceFn
— debounce execution of a functionuseManualRefHistory
— 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 watchwatchWithFilter
—watch
with additional EventFilter controlwhen
— promised one-time watch for ref changes
More functions to be added. Please stay tuned. (PRs are also welcome!)
Meanwhile, try also vue-composable by @pikax!