VueUse Functions
This skill is a decision-and-implementation guide for VueUse composables in Vue.js / Nuxt projects. It maps requirements to the most suitable VueUse function, applies the correct usage pattern, and prefers composable-based solutions over bespoke code to keep implementations concise, maintainable, and performant.
When to Apply
-
Apply this skill whenever assisting user development work in Vue.js / Nuxt.
-
Always check first whether a VueUse function can implement the requirement.
-
Prefer VueUse composables over custom code to improve readability, maintainability, and performance.
-
Map requirements to the most appropriate VueUse function and follow the function’s invocation rule.
-
Please refer to the Invocation field in the below functions table. For example:
AUTO: Use automatically when applicable.EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.EXPLICIT_ONLY: Use only when explicitly requested by the user.
NOTE User instructions in the prompt or AGENTS.md may override a function’s default Invocation rule.
Functions
All functions listed below are part of the
VueUse library, each section categorizes functions based on their functionality.
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
Keep states in the global scope to be reusable across Vue instances
AUTO
Create global state that can be injected into components
AUTO
Make a composable function usable with multiple Vue instances
AUTO
Extended inject with ability to call provideLocal to provide the value in the same component
AUTO
Extended provide with ability to call injectLocal to obtain the value in the same component
AUTO
Reactive async state
AUTO
Shorthand for useRefHistory with debounced filter
AUTO
Records the timestamp of the last change
AUTO
AUTO
Manually track the change history of a ref when the using calls commit()
AUTO
Track the change history of a ref
AUTO
AUTO
AUTO
Reactive Storage in with async support
AUTO
Shorthand for useRefHistory with throttled filter
AUTO
Elements
Function
Description
Invocation
Reactive document.activeElement
AUTO
AUTO
Make elements draggable
AUTO
Create a zone where files can be dropped
AUTO
AUTO
Reactive size of an HTML element
AUTO
Tracks the visibility of an element within the viewport
AUTO
Detects that a target element's visibility
AUTO
Reactive mouse position related to an element
AUTO
Watch for changes being made to the DOM tree
AUTO
Get parent element of the given element
AUTO
Reports changes to the dimensions of an Element's content or the border-box
AUTO
Reactively track window focus with window.onfocus and window.onblur events
AUTO
Reactive window scroll
AUTO
Reactive window size
AUTO
Browser
Function
Description
Invocation
AUTO
Reactive viewport breakpoints
AUTO
AUTO
Reactive browser location
AUTO
AUTO
AUTO
Reactive color mode (dark / light / customs) with auto data persistence
AUTO
Manipulate CSS variables
AUTO
Reactive dark mode with auto data persistence
AUTO
Use EventListener with ease
AUTO
AUTO
Reactive favicon
AUTO
Open file dialog with ease
AUTO
AUTO
AUTO
AUTO
Reactive load an image in the browser
AUTO
Reactive media controls for both audio and video elements
AUTO
AUTO
Reactive Memory Info
AUTO
Reactive URL representing an object
AUTO
Observe performance metrics
AUTO
AUTO
AUTO
AUTO
Reactive dark theme preference
AUTO
AUTO
AUTO
AUTO
AUTO
Reactive env(safe-area-inset-*)
AUTO
Creates a script tag
AUTO
AUTO
Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like
LHOST_PH_87 or
LHOST_PH_88AUTO
Inject reactive style element in head
AUTO
Automatically update the height of a textarea depending on the content
AUTO
Reactive
dir of the element's text
AUTO
Reactive document title
AUTO
AUTO
AUTO
AUTO
AUTO
AUTO
Run expensive functions without blocking the UI
AUTO
Sensors
Function
Description
Invocation
Listen for clicks outside of an element
AUTO
Fires when the element or any element containing it is removed
AUTO
Listen for keyboard keystrokes
AUTO
Listen for a long press on an element
AUTO
Fires when users start typing on non-editable elements
AUTO
AUTO
AUTO
AUTO
AUTO
AUTO
AUTO
Reactive element by point
AUTO
Reactive element's hover state
AUTO
Reactive utility to track or set the focus state of a DOM element
AUTO
Reactive utility to track if an element or one of its decendants has focus
AUTO
Reactive FPS (frames per second)
AUTO
AUTO
Tracks whether the user is being inactive
AUTO
Infinite scrolling of the element
AUTO
AUTO
Reactive keys pressed state
AUTO
Reactive mouse position
AUTO
Reactive mouse pressing state
AUTO
AUTO
AUTO
Reactive online state
AUTO
Reactive state to show whether the mouse leaves the page
AUTO
Create parallax effect easily
AUTO
AUTO
AUTO
AUTO
Reactive scroll position and state
AUTO
Lock scrolling of the element
AUTO
AUTO
AUTO
AUTO
AUTO
AUTO
Network
Function
Description
Invocation
AUTO
Reactive
Fetch API provides the ability to abort requests
AUTO
AUTO
Animation
Function
Description
Invocation
AUTO
Reactive counter increases on every interval
AUTO
Wrapper for setInterval with controls
AUTO
Reactive current Date instance
AUTO
Call function on every requestAnimationFrame
AUTO
Update value after a given time with controls
AUTO
Wrapper for setTimeout with controls
AUTO
Reactive current timestamp
AUTO
Transition between values
AUTO
Component
Function
Description
Invocation
Combine computed and inject
AUTO
Define and reuse template inside the component scope
AUTO
Template as Promise
AUTO
Shorthand for binding ref to template element
AUTO
Safe onBeforeMount
AUTO
Safe onBeforeUnmount
AUTO
Safe onMounted
AUTO
Safe onScopeDispose
AUTO
Safe onUnmounted
AUTO
Retrieves the underlying DOM element from a Vue ref or component instance
AUTO
Get the DOM element of current component as a ref
AUTO
Mounted state in ref
AUTO
Shorthand for binding refs to template elements and components inside v-for
AUTO
Create virtual lists with ease
AUTO
Shorthand for v-model binding
AUTO
Shorthand for props v-model binding
AUTO
Watch
Function
Description
Invocation
Promised one-time watch for changes
AUTO
Watch for an array with additions and removals
AUTO
watch with the number of times triggered
AUTO
Debounced watch
AUTO
Shorthand for watching value with {deep: true}
AUTO
Ignorable watch
AUTO
Shorthand for watching value with {immediate: true}
AUTO
Shorthand for watching value with { once: true }
AUTO
Pausable watch
AUTO
Throttled watch
AUTO
Watch that can be triggered manually
AUTO
watch with additional EventFilter control
AUTO
Shorthand for watching value to be truthy
AUTO
Reactivity
Function
Description
Invocation
Computed for async functions
AUTO
Eager computed without lazy evaluation
AUTO
Explicitly define the dependencies of computed
AUTO
Returns a deepRef or shallowRef depending on the deep param
AUTO
Add extra attributes to Ref
AUTO
Converts plain functions into reactive functions
AUTO
Apply reactify to an object
AUTO
Computed reactive object
AUTO
Reactively omit fields from a reactive object
AUTO
Reactively pick fields from a reactive object
AUTO
A ref which will be reset to the default value after some time
AUTO
Debounce execution of a ref value
AUTO
Apply default value to a ref
AUTO
Create a ref with manual reset functionality
AUTO
Throttle changing of a ref value
AUTO
Fine-grained controls over ref and its reactivity
AUTO
Two-way refs synchronization
AUTO
Keep target refs in sync with a source ref
AUTO
Converts ref to reactive
AUTO
Normalize value/ref/getter to ref or computed
EXPLICIT_ONLY
AUTO
Array
Function
Description
Invocation
Reactive get array difference of two arrays
AUTO
Reactive Array.every
AUTO
Reactive Array.filter
AUTO
Reactive Array.find
AUTO
Reactive Array.findIndex
AUTO
Reactive Array.findLast
AUTO
Reactive Array.includes
AUTO
Reactive Array.join
AUTO
Reactive Array.map
AUTO
Reactive Array.reduce
AUTO
Reactive Array.some
AUTO
Reactive unique array
AUTO
Reactive sort array
AUTO
Time
Function
Description
Invocation
Wrapper for useIntervalFn that provides a countdown timer
AUTO
Get the formatted date according to the string of tokens passed in
AUTO
Reactive time ago
AUTO
Reactive time ago with i18n supported
AUTO
Utilities
Function
Description
Invocation
Utility for creating event hooks
AUTO
Make a plain function accepting ref and raw values as arguments
AUTO
Shorthand for accessing ref.value
EXPLICIT_ONLY
Non-nullish checking type guard for Ref
AUTO
Make isomorphic destructurable for object and array at the same time
AUTO
Shorthand for ref.value = x
EXPLICIT_ONLY
Executes each asynchronous task sequentially and passes the current task result to the next task
AUTO
Reactive base64 transforming
AUTO
Cache a ref with a custom comparator
AUTO
Reactive clone of a ref
AUTO
Creates event hooks to support modals and confirmation dialog chains
AUTO
Basic counter with utility functions
AUTO
Cycle through a list of items
AUTO
Debounce execution of a function
AUTO
A basic event bus
AUTO
Cache results of functions depending on arguments and keep it reactive
AUTO
Reactive offset pagination
AUTO
Holds the previous value of a ref
AUTO
Provides helpers for building a multi-step wizard interface
AUTO
SSR compatibility isSupported
AUTO
Throttle execution of a function
AUTO
Use timeout to poll something
AUTO
A boolean switcher with utility functions
AUTO
Reactively convert a string ref to number
AUTO
Reactively convert a ref to string
AUTO
@Electron
Function
Description
Invocation
EXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
@Firebase
Function
Description
Invocation
EXTERNAL
EXTERNAL
EXTERNAL
@Head
Function
Description
Invocation
Create the head manager instance.
EXTERNAL
Update head meta tags reactively.
EXTERNAL
@Integrations
Function
Description
Invocation
EXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
Reactive instance for
drauuEXTERNAL
EXTERNAL
Easily implement fuzzy search using a composable with
Fuse.jsEXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
EXTERNAL
@Math
Function
Description
Invocation
Generic version of createProjection
EXTERNAL
Reactive numeric projection from one domain to another
EXTERNAL
AND condition for refs
EXTERNAL
NOT condition for ref
EXTERNAL
OR conditions for refs
EXTERNAL
Reactive Math.abs
EXTERNAL
Get the average of an array reactively
EXTERNAL
Reactive Math.ceil
EXTERNAL
Reactively clamp a value between two other values
EXTERNAL
Reactive Math.floor
EXTERNAL
Reactive Math methods
EXTERNAL
Reactive Math.max
EXTERNAL
Reactive Math.min
EXTERNAL
Reactively set the precision of a number
EXTERNAL
Reactive numeric projection from one domain to another
EXTERNAL
Reactive Math.round
EXTERNAL
Get the sum of an array reactively
EXTERNAL
Reactive Math.trunc
EXTERNAL
@Motion
Function
Description
Invocation
Sync a reactive object to a target element CSS styling
EXTERNAL
Sync a reactive object to a target element CSS transform.
EXTERNAL
Putting your components in motion.
EXTERNAL
Access Motion Properties for a target element.
EXTERNAL
Handle the Variants state and selection.
EXTERNAL
Spring animations.
EXTERNAL
@Router
Function
Description
Invocation
Shorthand for a reactive route.hash
EXTERNAL
Shorthand for a reactive route.params
EXTERNAL
Shorthand for a reactive route.query
EXTERNAL
@RxJS
Function
Description
Invocation
EXTERNAL
Sugar function to convert a
ref into an RxJS
ObserverEXTERNAL
Use an RxJS
LHOST_PH_363 as extracted from one or more composables
EXTERNAL
EXTERNAL
Bind an RxJS
LHOST_PH_367 to a
ref and propagate value changes both ways
EXTERNAL
Use an RxJS
LHOST_PH_370 without worrying about unsubscribing from it or creating memory leaks
EXTERNAL
Watch the values of an RxJS
LHOST_PH_372 as extracted from one or more composables
EXTERNAL
@SchemaOrg
Function
Description
Invocation
Create the schema.org manager instance.
EXTERNAL
Update schema.org reactively.
EXTERNAL
@Sound
Function
Description
Invocation
Play sound effects reactively.
EXTERNAL