Claude Code Plugins

Community-maintained marketplace

Feedback

vueuse-functions

@antfu/skills
3.4k
3

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

name vueuse-functions
description Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
license MIT
metadata [object Object]
compatibility Requires Vue 3 (or above) or Nuxt 3 (or above) project

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
`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 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 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` Update value after a given time with controls 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` Wrapper for useIntervalFn that provides a countdown timer 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 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