Agent skill

vueuse-functions

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

View SKILL.md on GitHub Repository
Stars 347
Forks 8

Install this agent skill to your Project

npx add-skill https://github.com/vueuse/skills/tree/main/skills/vueuse-functions

Metadata

Additional technical details for this skill

author
SerKo <https://github.com/serkodev>
version
1.0

SKILL.md

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
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 using 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 in 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 that 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 decendants 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
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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

computerlovetech/agr

migrate-to-skills

427 36
Explore
computerlovetech/agr

discover-assumptions

Use after solution concepts exist to surface and prioritize assumptions behind outcomes, opportunities, or solution ideas and design experiments to test them.

427 36
Explore
computerlovetech/agr

discover-opportunities

Use after outcomes are defined to discover opportunities, unmet needs, market gaps, or JTBD insights before choosing solutions.

427 36
Explore
computerlovetech/agr

discover-outcomes

Use at the start of product strategy to define or refine desired outcomes and success metrics (e.g., for Opportunity Solution Trees or continuous discovery) before selecting opportunities or solutions.

427 36
Explore
computerlovetech/agr

ideate-solutions

Use after opportunities are defined to generate and evaluate multiple product solution concepts before validating assumptions. Triggers when you need a set of distinct solution options tied to outcomes and opportunities.

427 36
Explore
computerlovetech/agr

ost

Use when running or maintaining an Opportunity Solution Tree (OST) workflow with a lightweight graph store and CLI. Provides a single entry skill that routes to outcome, opportunity, solution, and assumption/experiment phases via progressive disclosure.

427 36
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results