functions.md

::: tip 📰 Recently updated functions :::

Core Functions

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

Browser

• useActiveElement — reactive document.activeElement
• useBreakpoints — reactive viewport breakpoints
• useBrowserLocation — reactive browser location
• useClipboard — reactive Clipboard API
• useCssVar — manipulate CSS variables
• useDark — reactive dark mode with auto data persistence
• useEventListener — use EventListener with ease
• useFavicon — reactive favicon
• useFetch — reactive Fetch API provides the ability to abort requests
• useFullscreen — reactive Fullscreen API
• useMediaControls — reactive media controls for both audio and video elements
• useMediaQuery — reactive Media Query
• usePermission — reactive Permissions API
• usePreferredColorScheme — reactive prefers-color-scheme media query
• usePreferredDark — reactive dark theme preference
• usePreferredLanguages — reactive Navigator Languages
• useScriptTag — script tag injecting
• useShare — reactive Web Share API
• useTitle — reactive document title
• useUrlSearchParams — reactive URLSearchParams
• 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

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
• useTemplateRefsList — shorthand for binding refs to template elements and components inside v-for
• useVirtualList — composable virtual list
• useVModel — shorthand for v-model binding
• useVModels — 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 server
• useWebSocket — reactive WebSocket client
• useWebWorker — simple Web Workers registration and communication
• useWebWorkerFn — run expensive function without blocking the UI

Sensors

• onClickOutside — listen for clicks outside of an element
• onKeyStroke — listen for keyboard key being stroked
• 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
• useDocumentVisibility — reactively track document.visibilityState
• useDraggable — make elements draggable
• useElementBounding — reactive bounding box of an HTML element
• useElementHover — reactive element's hover state
• useElementSize — reactive size of an HTML element
• useElementVisibility — tracks the visibility of an element within the viewport
• useGeolocation — reactive Geolocation API
• useIdle — tracks whether the user is being inactive
• useIntersectionObserver — detects that a target element's visibility
• useKeyModifier — reactive Modifier State
• useMagicKeys — reactive keys pressed state
• useMouse — reactive mouse position
• useMouseInElement — reactive mouse position related to an element
• useMousePressed — reactive mouse pressing state
• useMutationObserver — watch for changes being made to the DOM tree
• 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
• useResizeObserver — reports changes to the dimensions of an Element's content or the border-box
• useScroll — reactive scroll position and state
• useSpeechRecognition — reactive SpeechRecognition
• useSpeechSynthesis — reactive SpeechSynthesis
• useSwipe — reactive swipe detection based on TouchEvents
• useUserMedia — reactive mediaDevices.getUserMedia streaming
• useWindowFocus — reactively track window focus with window.onfocus and window.onblur events
• useWindowScroll — reactive window scroll
• useWindowSize — reactive window size

State

• createGlobalState — keep states in the global scope to be reusable across Vue instances
• createSharedComposable — make a composable function usable with multiple Vue instances
• useLocalStorage — reactive LocalStorage
• useSessionStorage — reactive SessionStorage
• useStorage — reactive LocalStorage/SessionStorage

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
• 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
• reactivePick — reactively pick fields from a reactive object
• set — shorthand for ref.value = x
• syncRef — keep target refs in sync with a source ref
• toReactive — converts ref to reactive
• toRefs — extended toRefs that also accepts refs of an object
• useAsyncState — reactive async state
• useConfirmDialog — creates event hooks to support modals and confirmation dialog chains
• useCounter — basic counter with utility functions
• useDebounce — debounce execution of a ref value
• useDebouncedRefHistory — shorthand for useRefHistory with debounced filter
• useDebounceFn — debounce execution of a function
• useEventBus — a basic event bus
• useLastChanged — records the timestamp of the last change
• useManualRefHistory — manually track the change history of a ref when the using calls commit()
• useRefHistory — track the change history of a ref
• useThrottle — throttle changing of a ref value
• useThrottledRefHistory — shorthand for useRefHistory with throttled filter
• useThrottleFn — throttle execution of a function
• useToggle — a boolean switcher with utility functions

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

More functions avaliable in Add-ons.