functions.md

::: tip 📰 Recent 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

• 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

Component

• templateRef — shorthand for binding ref to template element
• tryOnMounted — safe onMounted
• tryOnUnmounted — safe onUnmounted
• unrefElement — unref for dom element
• 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
• useDeviceLight — reactive DeviceLightEvent
• useDeviceMotion — reactive DeviceMotionEvent
• useDeviceOrientation — reactive DeviceOrientationEvent
• useDevicePixelRatio — reactively track window.devicePixelRatio
• useDocumentVisibility — reactively track document.visibilityState
• 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
• useGeolocation — reactive Geolocation API
• useIdle — tracks whether the user is being inactive
• useIntersectionObserver — detects that a target element's visibility
• 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
• useResizeObserver — reports changes to the dimensions of an Element's content or the border-box
• useSpeechRecognition — reactive SpeechRecognition
• useSwipe — reactive swipe detection based on TouchEvents
• useWindowScroll — reactive window scroll
• useWindowSize — reactive window size

State

• createGlobalState — keep states in the global scope to be reusable across Vue instances
• useLocalStorage — reactive LocalStorage
• useSessionStorage — reactive SessionStorage
• useStorage — reactive LocalStorage/SessionStorage

Utilities

• asyncComputed — computed for async functions
• biSyncRef — two-way refs synchronization
• controlledComputed — explicitly define the deps of computed
• controlledRef — fine-grained controls over ref and its reactivity
• extendRef — add extra attributes to Ref
• get — shorthand for accessing ref.value
• makeDestructurable — make isomorphic destructurable for object and array at the same time
• 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
• useAsyncState — reactive async state
• useCounter — basic counter with utility functions
• useDebounce — debounce execution of a ref value
• useDebounceFn — debounce execution of a function
• 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
• 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
• watchWithFilter — watch with additional EventFilter control
• whenever — shorthand for watching value to be truthy

More functions avaliable in Add-ons.