Skip to content
On this page

Functions

Core
Add-ons
Sort by
Filters

Browser

useBluetooth - a reactive for working with the Web Bluetooth API which provides the ability to connect and interact with Bluetooth Low Energy peripherals
useBreakpoints - reactive viewport breakpoints
useBrowserLocation - reactive browser location
useColorMode - reactive color mode (dark / light / customs) with auto data persistence
useCssVar - manipulate CSS variables
useDark - reactive dark mode with auto data persistence
useEventListener - use EventListener with ease
useFavicon - reactive favicon
useFileSystemAccess - create and read and write local files with FileSystemAccessAPI
useGamepad - provides reactive bindings for the Gamepad API
useImage - reactive load an image in the browser
useMediaControls - reactive media controls for both audio and video elements
useMemory - reactive Memory Info
usePreferredDark - reactive dark theme preference
useScreenSafeArea - reactive env(safe-area-inset-*)
useScriptTag - script tag injecting
useStyleTag - inject reactive style element in head
useTitle - reactive document title
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

Sensors

onClickOutside - listen for clicks outside of an element
onKeyStroke - listen for keyboard key being stroked
onLongPress - listen for a long press on an element
onStartTyping - fires when users start typing on non-editable elements
useDevicesList - reactive enumerateDevices listing avaliable input/output devices
useElementByPoint - reactive element by point
useElementHover - reactive element's hover state
useFocus - reactive utility to track or set the focus state of a DOM element
useFocusWithin - reactive utility to track if an element or one of its decendants has focus
useFps - reactive FPS (frames per second)
useIdle - tracks whether the user is being inactive
useInfiniteScroll - infinite scrolling of the element
useMagicKeys - reactive keys pressed state
useMouse - reactive mouse position
useMousePressed - reactive mouse pressing state
useNavigatorLanguage - watch for changes being made to the navigator language preference by the user
useOnline - reactive online state
usePageLeave - reactive state to show whether the mouse leaves the page
useParallax - create parallax effect easily
usePointerSwipe - reactive swipe detection based on PointerEvents
useScroll - reactive scroll position and state
useScrollLock - lock scrolling of the element
useSwipe - reactive swipe detection based on TouchEvents
useTextSelection - reactively track user text selection based on Window.getSelection

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

State

createGlobalState - keep states in the global scope to be reusable across Vue instances
createInjectionState - create global state that can be injected into components
createSharedComposable - make a composable function usable with multiple Vue instances
useAsyncState - reactive async state
useDebouncedRefHistory - shorthand for useRefHistory with debounced filter
useManualRefHistory - manually track the change history of a ref when the using calls commit()
useRefHistory - track the change history of a ref
useStorageAsync - reactive Storage in with async support
useThrottledRefHistory - shorthand for useRefHistory with throttled filter

Elements

useActiveElement - reactive document.activeElement
useDraggable - make elements draggable
useDropZone - create an zone where files can be dropped
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
useIntersectionObserver - detects that a target element's visibility
useMouseInElement - reactive mouse position related to an element
useMutationObserver - watch for changes being made to the DOM tree
useResizeObserver - reports changes to the dimensions of an Element's content or the border-box
useWindowFocus - reactively track window focus with window.onfocus and window.onblur events
useWindowScroll - reactive window scroll
useWindowSize - reactive window size

Component

computedInject - combine computed and inject
templateRef - shorthand for binding ref to template element
tryOnBeforeMount - safe onBeforeMount
tryOnBeforeUnmount - safe onBeforeUnmount
tryOnMounted - safe onMounted
tryOnScopeDispose - safe onScopeDispose
tryOnUnmounted - safe onUnmounted
unrefElement - unref for dom element
useCurrentElement - get the DOM element of current component as a ref
useMounted - mounted state in ref
useTemplateRefsList - shorthand for binding refs to template elements and components inside v-for
useVirtualList - create virtual lists with ease
useVModel - shorthand for v-model binding
useVModels - shorthand for props v-model binding

Watch

until - promised one-time watch for changes
watchAtMost - watch with the number of times triggered
watchDebounced - debounced watch
watchIgnorable - ignorable watch
watchOnce - watch that only triggers once
watchPausable - pausable watch
watchThrottled - throttled watch
watchWithFilter - watch with additional EventFilter control
whenever - shorthand for watching value to be truthy

Network

useEventSource - an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server
useFetch - reactive Fetch API provides the ability to abort requests
useWebSocket - reactive WebSocket client

Utilities

computedAsync - computed for async functions
computedEager - eager computed without lazy evaluation
computedWithControl - explicitly define the deps of computed
createEventHook - utility for creating event hooks
createUnrefFn - make a plain function accepting ref and raw values as arguments
extendRef - add extra attributes to Ref
get - shorthand for accessing ref.value
isDefined - non-nullish checking type guard for Ref
logicAnd - AND condition for refs
logicNot - NOT condition for ref
logicOr - OR conditions for refs
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
reactiveComputed - computed reactive object
reactiveOmit - reactively omit fields from a reactive object
reactivePick - reactively pick fields from a reactive object
refAutoReset - a ref which will be reset to the default value after some time
refDebounced - debounce execution of a ref value
refDefault - apply default value to a ref
refThrottled - throttle changing of a ref value
refWithControl - fine-grained controls over ref and its reactivity
set - shorthand for ref.value = x
syncRef - two-way refs synchronization
syncRefs - keep target refs in sync with a source ref
toReactive - converts ref to reactive
toRefs - extended toRefs that also accepts refs of an object
useAsyncQueue - executes each asynchronous task sequentially and passed the current task result to the next task
useBase64 - reactive base64 transforming
useCached - cache a ref with a custom comparator
useClamp - reactively clamp a value between two other values
useConfirmDialog - creates event hooks to support modals and confirmation dialog chains
useCounter - basic counter with utility functions
useCycleList - cycle through a list of items
useDateFormat - get the formatted date according to the string of tokens passed in
useDebounceFn - debounce execution of a function
useEventBus - a basic event bus
useLastChanged - records the timestamp of the last change
useMemoize - cache results of functions depending on arguments and keep it reactive
useOffsetPagination - reactive offset pagination
useThrottleFn - throttle execution of a function
useTimeoutPoll - use timeout to poll something
useToggle - a boolean switcher with utility functions

Misc

useTimeAgo - reactive time ago
useWebWorker - simple Web Workers registration and communication
useWebWorkerFn - run expensive functions without blocking the UI

@Electron

useIpcRenderer - provides ipcRenderer and it's all APIs
useIpcRendererOn - use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted
useZoomFactor - reactive WebFrame zoom factor
useZoomLevel - reactive WebFrame zoom level

@Firebase

useAuth - reactive Firebase Auth binding
useFirestore - reactive Firestore binding

@Head

createHead - create the head manager instance.
useHead - update head meta tags reactively.

@Integrations

useAxios - wrapper for axios
useDrauu - reactive instance for drauu
useFocusTrap - reactive wrapper for focus-trap
useFuse - easily implement fuzzy search using a composable on top of the zero-dependency library Fuse.js
useJwt - wrapper for jwt-decode
useNProgress - reactive wrapper for nprogress
useQRCode - wrapper for qrcode

@Motion

useElementStyle - sync a reactive object to a target element CSS styling
useElementTransform - sync a reactive object to a target element CSS transform.
useMotion - putting your components in motion.
useMotionProperties - access Motion Properties for a target element.
useMotionVariants - handle the Variants state and selection.
useSpring - spring animations.

@Router

useRouteHash - shorthand for reactive route.hash
useRouteQuery - shorthand for reactive route.query

@RxJS

from - / fromEvent
toObserver - sugar function to convert a ref in an observer
useObservable - use an Observable
useSubject - bind Subject to ref and propagate value changes both ways
useSubscription - uses subscriptions without worry about unsubscribing to it or memory leaks

@SchemaOrg

createSchemaOrg - create the schema.org manager instance.
useSchemaOrg - update schema.org reactively.

@Sound

useSound - play sound effects reactively.
Functions has loaded