# Core Functions

# Animation

• useInterval — reactive counter increases on every interval
• useIntervalFn — wrapper for setInterval with controls
• 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

• useBrowserLocation — reactive browser location
• useClipboard — reactive Clipboard API
• useCssVar — manipulate CSS variables
• useEventListener — use EventListener with ease
• useFavicon — reactive favicon
• useFullscreen — reactive Fullscreen API
• 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

• tryOnMounted — safe onMounted
• tryOnUnmounted — safe onUnmounted
• useVModel — shorthand for v-model binding

# Misc

• useEventSource — an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server
• useWebSocket — reactive simple 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
• 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
• 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
• 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
• 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
• 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
• watchWithFilter — watch with additional EventFilter control
• when — 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!

# Add-ons

The core package aims to be lightweight and dependence free. While the add-ons are wrapping popular packages into the consistent API style.

# Router (@vueuse/router)

Utilities for vue-router

• useRouteHash — shorthand for reactive route.hash
• useRouteQuery — shorthand for reactive route.query

# Integrations (@vueuse/integrations)

Integration wrappers for utility libraries

• useAxios — wrapper for axios
• useCookies — wrapper for universal-cookie
• useNProgress — reactive wrapper for nprogress
• useQRCode — wrapper for qrcode

# RxJS (@vueuse/rxjs)

Enables RxJS reactive functions in Vue

• from — two wrappers around of the original functions to allow use ref objects
• toObserver — sugar function to convert a ref in an observer
• useObservable — use an Observable
• useSubscription — uses subscriptions without worry about unsubscribing to it or memory leaks

# Firebase (@vueuse/firebase)

Enables realtime bindings for Firebase

• useFirestore — reactive Firestore binding
• useRTDB — reactive Firebase Realtime Database binding