vueuse-functions

Comprehensive guide for applying 200+ VueUse composables to Vue.js and Nuxt projects. Covers 14 functional categories: state management, DOM elements, browser APIs, sensors, networking, animations, components, watchers, reactivity, arrays, time utilities, and integrations with Firebase, Electron, RxJS, and more. Each composable includes an invocation rule (AUTO, EXTERNAL, or EXPLICIT_ONLY) to guide when and how to use it; consult detailed references for usage patterns and type declarations. Prioritizes VueUse composables over custom implementations to improve code readability, maintainability, and performance across Vue 3 and Nuxt 3 projects. Requires Vue 3 or Nuxt 3; external integrations (Firebase, Electron, RxJS) need their respective dependencies installed.

INSTALLATION
npx skills add https://github.com/vueuse/skills --skill vueuse-functions
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2a

IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.

State

Function

Description

Invocation

createGlobalState

Keep states in the global scope to be reusable across Vue instances

AUTO

createInjectionState

Create global state that can be injected into components

AUTO

createSharedComposable

Make a composable function usable with multiple Vue instances

AUTO

injectLocal

Extended inject with ability to call provideLocal to provide the value in the same component

AUTO

provideLocal

Extended provide with ability to call injectLocal to obtain the value in the same component

AUTO

useAsyncState

Reactive async state

AUTO

useDebouncedRefHistory

Shorthand for useRefHistory with debounced filter

AUTO

useLastChanged

Records the timestamp of the last change

AUTO

useLocalStorage

Reactive LocalStorage

AUTO

useManualRefHistory

Manually track the change history of a ref when the user calls commit()

AUTO

useRefHistory

Track the change history of a ref

AUTO

useSessionStorage

Reactive SessionStorage

AUTO

useStorage

Create a reactive ref that can be used to access & modify LocalStorage or SessionStorage

AUTO

useStorageAsync

Reactive Storage with async support

AUTO

useThrottledRefHistory

Shorthand for useRefHistory with throttled filter

AUTO

Elements

Function

Description

Invocation

useActiveElement

Reactive document.activeElement

AUTO

useDocumentVisibility

Reactively track document.visibilityState

AUTO

useDraggable

Make elements draggable

AUTO

useDropZone

Create a zone where files can be dropped

AUTO

useElementBounding

Reactive bounding box of an HTML element

AUTO

useElementSize

Reactive size of an HTML element

AUTO

useElementVisibility

Tracks the visibility of an element within the viewport

AUTO

useIntersectionObserver

Detects changes to a target element's visibility

AUTO

useMouseInElement

Reactive mouse position related to an element

AUTO

useMutationObserver

Watch for changes being made to the DOM tree

AUTO

useParentElement

Get parent element of the given element

AUTO

useResizeObserver

Reports changes to the dimensions of an Element's content or the border-box

AUTO

useWindowFocus

Reactively track window focus with window.onfocus and window.onblur events

AUTO

useWindowScroll

Reactive window scroll

AUTO

useWindowSize

Reactive window size

AUTO

Browser

Function

Description

Invocation

useBluetooth

Reactive Web Bluetooth API

AUTO

useBreakpoints

Reactive viewport breakpoints

AUTO

useBroadcastChannel

Reactive BroadcastChannel API

AUTO

useBrowserLocation

Reactive browser location

AUTO

useClipboard

Reactive Clipboard API

AUTO

useClipboardItems

Reactive Clipboard API

AUTO

useColorMode

Reactive color mode (dark / light / customs) with auto data persistence

AUTO

useCssSupports

SSR compatible and reactive CSS.supports

AUTO

useCssVar

Manipulate CSS variables

AUTO

useDark

Reactive dark mode with auto data persistence

AUTO

useEventListener

Use EventListener with ease

AUTO

useEyeDropper

Reactive EyeDropper API

AUTO

useFavicon

Reactive favicon

AUTO

useFileDialog

Open file dialog with ease

AUTO

useFileSystemAccess

Create and read and write local files with FileSystemAccessAPI

AUTO

useFullscreen

Reactive Fullscreen API

AUTO

useGamepad

Provides reactive bindings for the Gamepad API

AUTO

useImage

Reactive load an image in the browser

AUTO

useMediaControls

Reactive media controls for both audio and video elements

AUTO

useMediaQuery

Reactive Media Query

AUTO

useMemory

Reactive Memory Info

AUTO

useObjectUrl

Reactive URL representing an object

AUTO

usePerformanceObserver

Observe performance metrics

AUTO

usePermission

Reactive Permissions API

AUTO

usePreferredColorScheme

Reactive prefers-color-scheme media query

AUTO

usePreferredContrast

Reactive prefers-contrast media query

AUTO

usePreferredDark

Reactive dark theme preference

AUTO

usePreferredLanguages

Reactive Navigator Languages

AUTO

usePreferredReducedMotion

Reactive prefers-reduced-motion media query

AUTO

usePreferredReducedTransparency

Reactive prefers-reduced-transparency media query

AUTO

useScreenOrientation

Reactive Screen Orientation API

AUTO

useScreenSafeArea

Reactive env(safe-area-inset-*)

AUTO

useScriptTag

Creates a script tag

AUTO

useShare

Reactive Web Share API

AUTO

useSSRWidth

Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpoints

AUTO

useStyleTag

Inject reactive style element in head

AUTO

useTextareaAutosize

Automatically update the height of a textarea depending on the content

AUTO

useTextDirection

Reactive dir of the element's text

AUTO

useTitle

Reactive document title

AUTO

useUrlSearchParams

Reactive URLSearchParams

AUTO

useVibrate

Reactive Vibration API

AUTO

useWakeLock

Reactive Screen Wake Lock API

AUTO

useWebNotification

Reactive Notification

AUTO

useWebWorker

Simple Web Workers registration and communication

AUTO

useWebWorkerFn

Run expensive functions without blocking the UI

AUTO

Sensors

Function

Description

Invocation

onClickOutside

Listen for clicks outside of an element

AUTO

onElementRemoval

Fires when the element or any element containing it is removed from the DOM

AUTO

onKeyStroke

Listen for keyboard keystrokes

AUTO

onLongPress

Listen for a long press on an element

AUTO

onStartTyping

Fires when users start typing on non-editable elements

AUTO

useBattery

Reactive Battery Status API

AUTO

useDeviceMotion

Reactive DeviceMotionEvent

AUTO

useDeviceOrientation

Reactive DeviceOrientationEvent

AUTO

useDevicePixelRatio

Reactively track window.devicePixelRatio

AUTO

useDevicesList

Reactive enumerateDevices listing available input/output devices

AUTO

useDisplayMedia

Reactive mediaDevices.getDisplayMedia streaming

AUTO

useElementByPoint

Reactive element by point

AUTO

useElementHover

Reactive element's hover state

AUTO

useFocus

Reactive utility to track or set the focus state of a DOM element

AUTO

useFocusWithin

Reactive utility to track if an element or one of its descendants has focus

AUTO

useFps

Reactive FPS (frames per second)

AUTO

useGeolocation

Reactive Geolocation API

AUTO

useIdle

Tracks whether the user is being inactive

AUTO

useInfiniteScroll

Infinite scrolling of the element

AUTO

useKeyModifier

Reactive Modifier State

AUTO

useMagicKeys

Reactive keys pressed state

AUTO

useMouse

Reactive mouse position

AUTO

useMousePressed

Reactive mouse pressing state

AUTO

useNavigatorLanguage

Reactive navigator.language

AUTO

useNetwork

Reactive Network status

AUTO

useOnline

Reactive online state

AUTO

usePageLeave

Reactive state to show whether the mouse leaves the page

AUTO

useParallax

Create parallax effect easily

AUTO

usePointer

Reactive pointer state

AUTO

usePointerLock

Reactive pointer lock

AUTO

usePointerSwipe

Reactive swipe detection based on PointerEvents

AUTO

useScroll

Reactive scroll position and state

AUTO

useScrollLock

Lock scrolling of the element

AUTO

useSpeechRecognition

Reactive SpeechRecognition

AUTO

useSpeechSynthesis

Reactive SpeechSynthesis

AUTO

useSwipe

Reactive swipe detection based on TouchEvents

AUTO

useTextSelection

Reactively track user text selection based on Window.getSelection

AUTO

useUserMedia

Reactive mediaDevices.getUserMedia streaming

AUTO

Network

Function

Description

Invocation

useEventSource

An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server

AUTO

useFetch

Reactive Fetch API provides the ability to abort requests

AUTO

useWebSocket

Reactive WebSocket client

AUTO

Animation

Function

Description

Invocation

useAnimate

Reactive Web Animations API

AUTO

useInterval

Reactive counter that increases on every interval

AUTO

useIntervalFn

Wrapper for setInterval with controls

AUTO

useNow

Reactive current Date instance

AUTO

useRafFn

Call function on every requestAnimationFrame

AUTO

useTimeout

Reactive value that becomes true after a given time

AUTO

useTimeoutFn

Wrapper for setTimeout with controls

AUTO

useTimestamp

Reactive current timestamp

AUTO

useTransition

Transition between values

AUTO

Component

Function

Description

Invocation

computedInject

Combine computed and inject

AUTO

createReusableTemplate

Define and reuse template inside the component scope

AUTO

createTemplatePromise

Template as Promise

AUTO

templateRef

Shorthand for binding ref to template element

AUTO

tryOnBeforeMount

Safe onBeforeMount

AUTO

tryOnBeforeUnmount

Safe onBeforeUnmount

AUTO

tryOnMounted

Safe onMounted

AUTO

tryOnScopeDispose

Safe onScopeDispose

AUTO

tryOnUnmounted

Safe onUnmounted

AUTO

unrefElement

Retrieves the underlying DOM element from a Vue ref or component instance

AUTO

useCurrentElement

Get the DOM element of current component as a ref

AUTO

useMounted

Mounted state in ref

AUTO

useTemplateRefsList

Shorthand for binding refs to template elements and components inside v-for

AUTO

useVirtualList

Create virtual lists with ease

AUTO

useVModel

Shorthand for v-model binding

AUTO

useVModels

Shorthand for props v-model binding

AUTO

Watch

Function

Description

Invocation

until

Promised one-time watch for changes

AUTO

watchArray

Watch for an array with additions and removals

AUTO

watchAtMost

watch with the number of times triggered

AUTO

watchDebounced

Debounced watch

AUTO

watchDeep

Shorthand for watching value with {deep: true}

AUTO

watchIgnorable

Ignorable watch

AUTO

watchImmediate

Shorthand for watching value with {immediate: true}

AUTO

watchOnce

Shorthand for watching value with { once: true }

AUTO

watchPausable

Pausable watch

AUTO

watchThrottled

Throttled watch

AUTO

watchTriggerable

Watch that can be triggered manually

AUTO

watchWithFilter

watch with additional EventFilter control

AUTO

whenever

Shorthand for watching value to be truthy

AUTO

Reactivity

Function

Description

Invocation

computedAsync

Computed for async functions

AUTO

computedEager

Eager computed without lazy evaluation

AUTO

computedWithControl

Explicitly define the dependencies of computed

AUTO

createRef

Returns a deepRef or shallowRef depending on the deep param

AUTO

extendRef

Add extra attributes to Ref

AUTO

reactify

Converts plain functions into reactive functions

AUTO

reactifyObject

Apply reactify to an object

AUTO

reactiveComputed

Computed reactive object

AUTO

reactiveOmit

Reactively omit fields from a reactive object

AUTO

reactivePick

Reactively pick fields from a reactive object

AUTO

refAutoReset

A ref which will be reset to the default value after some time

AUTO

refDebounced

Debounce execution of a ref value

AUTO

refDefault

Apply default value to a ref

AUTO

refManualReset

Create a ref with manual reset functionality

AUTO

refThrottled

Throttle changing of a ref value

AUTO

refWithControl

Fine-grained controls over ref and its reactivity

AUTO

syncRef

Two-way refs synchronization

AUTO

syncRefs

Keep target refs in sync with a source ref

AUTO

toReactive

Converts ref to reactive

AUTO

toRef

Normalize value/ref/getter to ref or computed

EXPLICIT_ONLY

toRefs

Extended toRefs that also accepts refs of an object

AUTO

Array

Function

Description

Invocation

useArrayDifference

Reactive get array difference of two arrays

AUTO

useArrayEvery

Reactive Array.every

AUTO

useArrayFilter

Reactive Array.filter

AUTO

useArrayFind

Reactive Array.find

AUTO

useArrayFindIndex

Reactive Array.findIndex

AUTO

useArrayFindLast

Reactive Array.findLast

AUTO

useArrayIncludes

Reactive Array.includes

AUTO

useArrayJoin

Reactive Array.join

AUTO

useArrayMap

Reactive Array.map

AUTO

useArrayReduce

Reactive Array.reduce

AUTO

useArraySome

Reactive Array.some

AUTO

useArrayUnique

Reactive unique array

AUTO

useSorted

Reactive sort array

AUTO

Time

Function

Description

Invocation

useCountdown

Reactive countdown timer in seconds

AUTO

useDateFormat

Get the formatted date according to the string of tokens passed in

AUTO

useTimeAgo

Reactive time ago

AUTO

useTimeAgoIntl

Reactive time ago with i18n supported

AUTO

Utilities

Function

Description

Invocation

createDisposableDirective

Utility for authoring disposable directives

AUTO

createEventHook

Utility for creating event hooks

AUTO

createUnrefFn

Make a plain function accepting ref and raw values as arguments

AUTO

get

Shorthand for accessing ref.value

EXPLICIT_ONLY

isDefined

Non-nullish checking type guard for Ref

AUTO

makeDestructurable

Make isomorphic destructurable for object and array at the same time

AUTO

set

Shorthand for ref.value = x

EXPLICIT_ONLY

useAsyncQueue

Executes each asynchronous task sequentially and passes the current task result to the next task

AUTO

useBase64

Reactive base64 transforming

AUTO

useCached

Cache a ref with a custom comparator

AUTO

useCloned

Reactive clone of a ref

AUTO

useConfirmDialog

Creates event hooks to support modals and confirmation dialog chains

AUTO

useCounter

Basic counter with utility functions

AUTO

useCycleList

Cycle through a list of items

AUTO

useDebounceFn

Debounce execution of a function

AUTO

useEventBus

A basic event bus

AUTO

useMemoize

Cache results of functions depending on arguments and keep it reactive

AUTO

useOffsetPagination

Reactive offset pagination

AUTO

usePrevious

Holds the previous value of a ref

AUTO

useStepper

Provides helpers for building a multi-step wizard interface

AUTO

useSupported

SSR compatibility isSupported

AUTO

useThrottleFn

Throttle execution of a function

AUTO

useTimeoutPoll

Use timeout to poll something

AUTO

useToggle

A boolean switcher with utility functions

AUTO

useToNumber

Reactively convert a string ref to number

AUTO

useToString

Reactively convert a ref to string

AUTO

@Electron

Function

Description

Invocation

useIpcRenderer

Provides ipcRenderer and all of its APIs with Vue reactivity

EXTERNAL

useIpcRendererInvoke

Reactive ipcRenderer.invoke API result

EXTERNAL

useIpcRendererOn

Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted

EXTERNAL

useZoomFactor

Reactive WebFrame zoom factor

EXTERNAL

useZoomLevel

Reactive WebFrame zoom level

EXTERNAL

@Firebase

Function

Description

Invocation

useAuth

Reactive Firebase Auth binding

EXTERNAL

useFirestore

Reactive Firestore binding

EXTERNAL

useRTDB

Reactive Firebase Realtime Database binding

EXTERNAL

@Head

Function

Description

Invocation

createHead

Create the head manager instance.

EXTERNAL

useHead

Update head meta tags reactively.

EXTERNAL

@Integrations

Function

Description

Invocation

useAsyncValidator

Wrapper for async-validator

EXTERNAL

useAxios

Wrapper for axios

EXTERNAL

useChangeCase

Reactive wrapper for change-case

EXTERNAL

useCookies

Wrapper for universal-cookie

EXTERNAL

useDrauu

Reactive instance for drauu

EXTERNAL

useFocusTrap

Reactive wrapper for focus-trap

EXTERNAL

useFuse

Easily implement fuzzy search using a composable with Fuse.js

EXTERNAL

useIDBKeyval

Wrapper for idb-keyval

EXTERNAL

useJwt

Wrapper for jwt-decode

EXTERNAL

useNProgress

Reactive wrapper for nprogress

EXTERNAL

useQRCode

Wrapper for qrcode

EXTERNAL

useSortable

Wrapper for sortable

EXTERNAL

@Math

Function

Description

Invocation

createGenericProjection

Generic version of createProjection

EXTERNAL

createProjection

Reactive numeric projection from one domain to another

EXTERNAL

logicAnd

AND condition for refs

EXTERNAL

logicNot

NOT condition for ref

EXTERNAL

logicOr

OR conditions for refs

EXTERNAL

useAbs

Reactive Math.abs

EXTERNAL

useAverage

Get the average of an array reactively

EXTERNAL

useCeil

Reactive Math.ceil

EXTERNAL

useClamp

Reactively clamp a value between two other values

EXTERNAL

useFloor

Reactive Math.floor

EXTERNAL

useMath

Reactive Math methods

EXTERNAL

useMax

Reactive Math.max

EXTERNAL

useMin

Reactive Math.min

EXTERNAL

usePrecision

Reactively set the precision of a number

EXTERNAL

useProjection

Reactive numeric projection from one domain to another

EXTERNAL

useRound

Reactive Math.round

EXTERNAL

useSum

Get the sum of an array reactively

EXTERNAL

useTrunc

Reactive Math.trunc

EXTERNAL

@Motion

Function

Description

Invocation

useElementStyle

Sync a reactive object to a target element CSS styling

EXTERNAL

useElementTransform

Sync a reactive object to a target element CSS transform.

EXTERNAL

useMotion

Putting your components in motion.

EXTERNAL

useMotionProperties

Access Motion Properties for a target element.

EXTERNAL

useMotionVariants

Handle the Variants state and selection.

EXTERNAL

useSpring

Spring animations.

EXTERNAL

@Router

Function

Description

Invocation

useRouteHash

Shorthand for a reactive route.hash

EXTERNAL

useRouteParams

Shorthand for a reactive route.params

EXTERNAL

useRouteQuery

Shorthand for a reactive route.query

EXTERNAL

@RxJS

Function

Description

Invocation

from

Wrappers around RxJS's from() and fromEvent() to allow them to accept refs

EXTERNAL

toObserver

Sugar function to convert a ref into an RxJS Observer

EXTERNAL

useExtractedObservable

Use an RxJS Observable as extracted from one or more composables

EXTERNAL

useObservable

Use an RxJS Observable

EXTERNAL

useSubject

Bind an RxJS Subject to a ref and propagate value changes both ways

EXTERNAL

useSubscription

Use an RxJS Subscription without worrying about unsubscribing from it or creating memory leaks

EXTERNAL

watchExtractedObservable

Watch the values of an RxJS Observable as extracted from one or more composables

EXTERNAL

@SchemaOrg

Function

Description

Invocation

createSchemaOrg

Create the schema.org manager instance.

EXTERNAL

useSchemaOrg

Update schema.org reactively.

EXTERNAL

@Sound

Function

Description

Invocation

useSound

Play sound effects reactively.

EXTERNAL

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card