Vueuse Functions

Name: Vueuse Functions
Author: antfu

4.1k

This skill provides a comprehensive guide for utilizing VueUse composables in Vue.js and Nuxt projects, helping developers map requirements to the most appropriate functions for state management, element interaction, browser features, and more. It promotes the use of composable-based solutions over custom code to enhance code clarity, maintainability, and performance. Designed for developers working within Vue.js or Nuxt, it ensures efficient implementation of reactivity and functionality using VueUse's extensive library.

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

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

GitHub Owner

Owner: antfu

GitHub Links

Twitter: https://twitter.com/antfu7
YouTube: https://www.youtube.com/c/AnthonyFu7
Instagram: https://www.instagram.com/antfu7

Files

SKILL.md

name: vueuse-functions description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. license: MIT metadata: author: SerKo https://github.com/serkodev version: "1.0" compatibility: Requires Vue 3 (or above) or Nuxt 3 (or above) project