AutoGineer
Generated banner for Vueuse Functions
Generated logo for Vueuse Functions

Vueuse Functions

JetBrainsOfficialCreated by SerKoDistributed by JetBrains

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
— the description by SerKo

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The vueuse-functions skill provides a structured approach to leveraging the VueUse library within Vue 3 and Nuxt 3 applications. It serves as a decision-making framework to help developers replace custom, bespoke code with optimized, well-tested composables. The skill categorizes functions by their purpose—such as state management, browser API interaction, and reactivity—and provides specific invocation rules to ensure appropriate usage. By prioritizing these composables, developers can write more concise, readable, and performant code.

What it does

  • Maps common development requirements to specific VueUse composable functions.
  • Provides standardized patterns for state management, browser API access, and reactivity.
  • Offers guidance on handling async operations and side effects within Vue components.
  • Defines invocation rules to manage dependencies and explicit user requirements.
  • Encourages the replacement of custom boilerplate code with library-supported solutions.

When to use it

  • When building features in Vue 3 or Nuxt 3 that require browser API interactions.
  • When you need to manage complex reactive state or handle asynchronous data fetching.
  • When looking to reduce the amount of custom boilerplate code in your components.
  • When you want to ensure your implementation follows best practices for Vue.js reactivity.

Advantages

  • Improves code maintainability by using standardized, community-vetted composables.
  • Reduces development time by providing ready-to-use solutions for common web tasks.
  • Enhances performance through optimized reactivity and lifecycle management.
  • Ensures consistent implementation patterns across the codebase.

Usage examples

“How can I fetch data asynchronously and track the loading state in my Vue component?”
The agent will recommend using computedAsync, demonstrating how to pass a ref to track the evaluation state and handle potential errors.
“I need to check if a user has open todos and update the UI reactively.”
The agent will suggest using computedEager (or standard computed for Vue 3.4+) to efficiently track the boolean state of the todo list.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/jetbrains/vueuse-functions/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip vueuse-functions.zip -d .agents/skills

Documentation by SerKo

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
FunctionDescriptionInvocation
createGlobalStateKeep states in the global scope to be reusable across Vue instancesAUTO
createInjectionStateCreate global state that can be injected into componentsAUTO
createSharedComposableMake a composable function usable with multiple Vue instancesAUTO
injectLocalExtended inject with ability to call provideLocal to provide the value in the same componentAUTO
provideLocalExtended provide with ability to call injectLocal to obtain the value in the same componentAUTO
useAsyncStateReactive async stateAUTO
useDebouncedRefHistoryShorthand for useRefHistory with debounced filterAUTO
useLastChangedRecords the timestamp of the last changeAUTO
useLocalStorageReactive LocalStorageAUTO
useManualRefHistoryManually track the change history of a ref when the using calls commit()AUTO
useRefHistoryTrack the change history of a refAUTO
useSessionStorageReactive SessionStorageAUTO
useStorageCreate a reactive ref that can be used to access & modify LocalStorage or SessionStorageAUTO
useStorageAsyncReactive Storage in with async supportAUTO
useThrottledRefHistoryShorthand for useRefHistory with throttled filterAUTO
Elements
FunctionDescriptionInvocation
useActiveElementReactive document.activeElementAUTO
useDocumentVisibilityReactively track document.visibilityStateAUTO
useDraggableMake elements draggableAUTO
useDropZoneCreate a zone where files can be droppedAUTO
useElementBoundingReactive bounding box of an HTML elementAUTO
useElementSizeReactive size of an HTML elementAUTO
useElementVisibilityTracks the visibility of an element within the viewportAUTO
useIntersectionObserverDetects that a target element's visibilityAUTO
useMouseInElementReactive mouse position related to an elementAUTO
useMutationObserverWatch for changes being made to the DOM treeAUTO
useParentElementGet parent element of the given elementAUTO
useResizeObserverReports changes to the dimensions of an Element's content or the border-boxAUTO
useWindowFocusReactively track window focus with window.onfocus and window.onblur eventsAUTO
useWindowScrollReactive window scrollAUTO
useWindowSizeReactive window sizeAUTO
Browser
FunctionDescriptionInvocation
useBluetoothReactive Web Bluetooth APIAUTO
useBreakpointsReactive viewport breakpointsAUTO
useBroadcastChannelReactive BroadcastChannel APIAUTO
useBrowserLocationReactive browser locationAUTO
useClipboardReactive Clipboard APIAUTO
useClipboardItemsReactive Clipboard APIAUTO
useColorModeReactive color mode (dark / light / customs) with auto data persistenceAUTO
useCssSupportsSSR compatible and reactive CSS.supportsAUTO
useCssVarManipulate CSS variablesAUTO
useDarkReactive dark mode with auto data persistenceAUTO
useEventListenerUse EventListener with easeAUTO
useEyeDropperReactive EyeDropper APIAUTO
useFaviconReactive faviconAUTO
useFileDialogOpen file dialog with easeAUTO
useFileSystemAccessCreate and read and write local files with FileSystemAccessAPIAUTO
useFullscreenReactive Fullscreen APIAUTO
useGamepadProvides reactive bindings for the Gamepad APIAUTO
useImageReactive load an image in the browserAUTO
useMediaControlsReactive media controls for both audio and video elementsAUTO
useMediaQueryReactive Media QueryAUTO
useMemoryReactive Memory InfoAUTO
useObjectUrlReactive URL representing an objectAUTO
usePerformanceObserverObserve performance metricsAUTO
usePermissionReactive Permissions APIAUTO
usePreferredColorSchemeReactive prefers-color-scheme media queryAUTO
usePreferredContrastReactive prefers-contrast media queryAUTO
usePreferredDarkReactive dark theme preferenceAUTO
usePreferredLanguagesReactive Navigator LanguagesAUTO
usePreferredReducedMotionReactive prefers-reduced-motion media queryAUTO
usePreferredReducedTransparencyReactive prefers-reduced-transparency media queryAUTO
useScreenOrientationReactive Screen Orientation APIAUTO
useScreenSafeAreaReactive env(safe-area-inset-*)AUTO
useScriptTagCreates a script tagAUTO
useShareReactive Web Share APIAUTO
useSSRWidthUsed to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpointsAUTO
useStyleTagInject reactive style element in headAUTO
useTextareaAutosizeAutomatically update the height of a textarea depending on the contentAUTO
useTextDirectionReactive dir of the element's textAUTO
useTitleReactive document titleAUTO
useUrlSearchParamsReactive URLSearchParamsAUTO
useVibrateReactive Vibration APIAUTO
useWakeLockReactive Screen Wake Lock APIAUTO
useWebNotificationReactive NotificationAUTO
useWebWorkerSimple Web Workers registration and communicationAUTO
useWebWorkerFnRun expensive functions without blocking the UIAUTO
Sensors
FunctionDescriptionInvocation
onClickOutsideListen for clicks outside of an elementAUTO
onElementRemovalFires when the element or any element containing it is removed from the DOMAUTO
onKeyStrokeListen for keyboard keystrokesAUTO
onLongPressListen for a long press on an elementAUTO
onStartTypingFires when users start typing on non-editable elementsAUTO
useBatteryReactive Battery Status APIAUTO
useDeviceMotionReactive DeviceMotionEventAUTO
useDeviceOrientationReactive DeviceOrientationEventAUTO
useDevicePixelRatioReactively track window.devicePixelRatioAUTO
useDevicesListReactive enumerateDevices listing available input/output devicesAUTO
useDisplayMediaReactive mediaDevices.getDisplayMedia streamingAUTO
useElementByPointReactive element by pointAUTO
useElementHoverReactive element's hover stateAUTO
useFocusReactive utility to track or set the focus state of a DOM elementAUTO
useFocusWithinReactive utility to track if an element or one of its decendants has focusAUTO
useFpsReactive FPS (frames per second)AUTO
useGeolocationReactive Geolocation APIAUTO
useIdleTracks whether the user is being inactiveAUTO
useInfiniteScrollInfinite scrolling of the elementAUTO
useKeyModifierReactive Modifier StateAUTO
useMagicKeysReactive keys pressed stateAUTO
useMouseReactive mouse positionAUTO
useMousePressedReactive mouse pressing stateAUTO
useNavigatorLanguageReactive navigator.languageAUTO
useNetworkReactive Network statusAUTO
useOnlineReactive online stateAUTO
usePageLeaveReactive state to show whether the mouse leaves the pageAUTO
useParallaxCreate parallax effect easilyAUTO
usePointerReactive pointer stateAUTO
usePointerLockReactive pointer lockAUTO
usePointerSwipeReactive swipe detection based on PointerEventsAUTO
useScrollReactive scroll position and stateAUTO
useScrollLockLock scrolling of the elementAUTO
useSpeechRecognitionReactive SpeechRecognitionAUTO
useSpeechSynthesisReactive SpeechSynthesisAUTO
useSwipeReactive swipe detection based on TouchEventsAUTO
useTextSelectionReactively track user text selection based on Window.getSelectionAUTO
useUserMediaReactive mediaDevices.getUserMedia streamingAUTO
Network
FunctionDescriptionInvocation
useEventSourceAn EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP serverAUTO
useFetchReactive Fetch API provides the ability to abort requestsAUTO
useWebSocketReactive WebSocket clientAUTO
Animation
FunctionDescriptionInvocation
useAnimateReactive Web Animations APIAUTO
useIntervalReactive counter that increases on every intervalAUTO
useIntervalFnWrapper for setInterval with controlsAUTO
useNowReactive current Date instanceAUTO
useRafFnCall function on every requestAnimationFrameAUTO
useTimeoutReactive value that becomes true after a given timeAUTO
useTimeoutFnWrapper for setTimeout with controlsAUTO
useTimestampReactive current timestampAUTO
useTransitionTransition between valuesAUTO
Component
FunctionDescriptionInvocation
computedInjectCombine computed and injectAUTO
createReusableTemplateDefine and reuse template inside the component scopeAUTO
createTemplatePromiseTemplate as PromiseAUTO
templateRefShorthand for binding ref to template elementAUTO
tryOnBeforeMountSafe onBeforeMountAUTO
tryOnBeforeUnmountSafe onBeforeUnmountAUTO
tryOnMountedSafe onMountedAUTO
tryOnScopeDisposeSafe onScopeDisposeAUTO
tryOnUnmountedSafe onUnmountedAUTO
unrefElementRetrieves the underlying DOM element from a Vue ref or component instanceAUTO
useCurrentElementGet the DOM element of current component as a refAUTO
useMountedMounted state in refAUTO
useTemplateRefsListShorthand for binding refs to template elements and components inside v-forAUTO
useVirtualListCreate virtual lists with easeAUTO
useVModelShorthand for v-model bindingAUTO
useVModelsShorthand for props v-model bindingAUTO
Watch
FunctionDescriptionInvocation
untilPromised one-time watch for changesAUTO
watchArrayWatch for an array with additions and removalsAUTO
watchAtMostwatch with the number of times triggeredAUTO
watchDebouncedDebounced watchAUTO
watchDeepShorthand for watching value with {deep: true}AUTO
watchIgnorableIgnorable watchAUTO
watchImmediateShorthand for watching value with {immediate: true}AUTO
watchOnceShorthand for watching value with { once: true }AUTO
watchPausablePausable watchAUTO
watchThrottledThrottled watchAUTO
watchTriggerableWatch that can be triggered manuallyAUTO
watchWithFilterwatch with additional EventFilter controlAUTO
wheneverShorthand for watching value to be truthyAUTO
Reactivity
FunctionDescriptionInvocation
computedAsyncComputed for async functionsAUTO
computedEagerEager computed without lazy evaluationAUTO
computedWithControlExplicitly define the dependencies of computedAUTO
createRefReturns a deepRef or shallowRef depending on the deep paramAUTO
extendRefAdd extra attributes to RefAUTO
reactifyConverts plain functions into reactive functionsAUTO
reactifyObjectApply reactify to an objectAUTO
reactiveComputedComputed reactive objectAUTO
reactiveOmitReactively omit fields from a reactive objectAUTO
reactivePickReactively pick fields from a reactive objectAUTO
refAutoResetA ref which will be reset to the default value after some timeAUTO
refDebouncedDebounce execution of a ref valueAUTO
refDefaultApply default value to a refAUTO
refManualResetCreate a ref with manual reset functionalityAUTO
refThrottledThrottle changing of a ref valueAUTO
refWithControlFine-grained controls over ref and its reactivityAUTO
syncRefTwo-way refs synchronizationAUTO
syncRefsKeep target refs in sync with a source refAUTO
toReactiveConverts ref to reactiveAUTO
toRefNormalize value/ref/getter to ref or computedEXPLICIT_ONLY
toRefsExtended toRefs that also accepts refs of an objectAUTO
Array
FunctionDescriptionInvocation
useArrayDifferenceReactive get array difference of two arraysAUTO
useArrayEveryReactive Array.everyAUTO
useArrayFilterReactive Array.filterAUTO
useArrayFindReactive Array.findAUTO
useArrayFindIndexReactive Array.findIndexAUTO
useArrayFindLastReactive Array.findLastAUTO
useArrayIncludesReactive Array.includesAUTO
useArrayJoinReactive Array.joinAUTO
useArrayMapReactive Array.mapAUTO
useArrayReduceReactive Array.reduceAUTO
useArraySomeReactive Array.someAUTO
useArrayUniqueReactive unique arrayAUTO
useSortedReactive sort arrayAUTO
Time
FunctionDescriptionInvocation
useCountdownReactive countdown timer in secondsAUTO
useDateFormatGet the formatted date according to the string of tokens passed inAUTO
useTimeAgoReactive time agoAUTO
useTimeAgoIntlReactive time ago with i18n supportedAUTO
Utilities
FunctionDescriptionInvocation
createEventHookUtility for creating event hooksAUTO
createUnrefFnMake a plain function accepting ref and raw values as argumentsAUTO
getShorthand for accessing ref.valueEXPLICIT_ONLY
isDefinedNon-nullish checking type guard for RefAUTO
makeDestructurableMake isomorphic destructurable for object and array at the same timeAUTO
setShorthand for ref.value = xEXPLICIT_ONLY
useAsyncQueueExecutes each asynchronous task sequentially and passes the current task result to the next taskAUTO
useBase64Reactive base64 transformingAUTO
useCachedCache a ref with a custom comparatorAUTO
useClonedReactive clone of a refAUTO
useConfirmDialogCreates event hooks to support modals and confirmation dialog chainsAUTO
useCounterBasic counter with utility functionsAUTO
useCycleListCycle through a list of itemsAUTO
useDebounceFnDebounce execution of a functionAUTO
useEventBusA basic event busAUTO
useMemoizeCache results of functions depending on arguments and keep it reactiveAUTO
useOffsetPaginationReactive offset paginationAUTO
usePreviousHolds the previous value of a refAUTO
useStepperProvides helpers for building a multi-step wizard interfaceAUTO
useSupportedSSR compatibility isSupportedAUTO
useThrottleFnThrottle execution of a functionAUTO
useTimeoutPollUse timeout to poll somethingAUTO
useToggleA boolean switcher with utility functionsAUTO
useToNumberReactively convert a string ref to numberAUTO
useToStringReactively convert a ref to stringAUTO
@Electron
FunctionDescriptionInvocation
useIpcRendererProvides ipcRenderer and all of its APIs with Vue reactivityEXTERNAL
useIpcRendererInvokeReactive ipcRenderer.invoke API resultEXTERNAL
useIpcRendererOnUse ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmountedEXTERNAL
useZoomFactorReactive WebFrame zoom factorEXTERNAL
useZoomLevelReactive WebFrame zoom levelEXTERNAL
@Firebase
FunctionDescriptionInvocation
useAuthReactive Firebase Auth bindingEXTERNAL
useFirestoreReactive Firestore bindingEXTERNAL
useRTDBReactive Firebase Realtime Database bindingEXTERNAL
@Head
FunctionDescriptionInvocation
createHeadCreate the head manager instance.EXTERNAL
useHeadUpdate head meta tags reactively.EXTERNAL
@Integrations
FunctionDescriptionInvocation
useAsyncValidatorWrapper for async-validatorEXTERNAL
useAxiosWrapper for axiosEXTERNAL
useChangeCaseReactive wrapper for change-caseEXTERNAL
useCookiesWrapper for universal-cookieEXTERNAL
useDrauuReactive instance for drauuEXTERNAL
useFocusTrapReactive wrapper for focus-trapEXTERNAL
useFuseEasily implement fuzzy search using a composable with Fuse.jsEXTERNAL
useIDBKeyvalWrapper for idb-keyvalEXTERNAL
useJwtWrapper for jwt-decodeEXTERNAL
useNProgressReactive wrapper for nprogressEXTERNAL
useQRCodeWrapper for qrcodeEXTERNAL
useSortableWrapper for sortableEXTERNAL
@Math
FunctionDescriptionInvocation
createGenericProjectionGeneric version of createProjectionEXTERNAL
createProjectionReactive numeric projection from one domain to anotherEXTERNAL
logicAndAND condition for refsEXTERNAL
logicNotNOT condition for refEXTERNAL
logicOrOR conditions for refsEXTERNAL
useAbsReactive Math.absEXTERNAL
useAverageGet the average of an array reactivelyEXTERNAL
useCeilReactive Math.ceilEXTERNAL
useClampReactively clamp a value between two other valuesEXTERNAL
useFloorReactive Math.floorEXTERNAL
useMathReactive Math methodsEXTERNAL
useMaxReactive Math.maxEXTERNAL
useMinReactive Math.minEXTERNAL
usePrecisionReactively set the precision of a numberEXTERNAL
useProjectionReactive numeric projection from one domain to anotherEXTERNAL
useRoundReactive Math.roundEXTERNAL
useSumGet the sum of an array reactivelyEXTERNAL
useTruncReactive Math.truncEXTERNAL
@Motion
FunctionDescriptionInvocation
useElementStyleSync a reactive object to a target element CSS stylingEXTERNAL
useElementTransformSync a reactive object to a target element CSS transform.EXTERNAL
useMotionPutting your components in motion.EXTERNAL
useMotionPropertiesAccess Motion Properties for a target element.EXTERNAL
useMotionVariantsHandle the Variants state and selection.EXTERNAL
useSpringSpring animations.EXTERNAL
@Router
FunctionDescriptionInvocation
useRouteHashShorthand for a reactive route.hashEXTERNAL
useRouteParamsShorthand for a reactive route.paramsEXTERNAL
useRouteQueryShorthand for a reactive route.queryEXTERNAL
@RxJS
FunctionDescriptionInvocation
fromWrappers around RxJS's from() and fromEvent() to allow them to accept refsEXTERNAL
toObserverSugar function to convert a ref into an RxJS ObserverEXTERNAL
useExtractedObservableUse an RxJS Observable as extracted from one or more composablesEXTERNAL
useObservableUse an RxJS ObservableEXTERNAL
useSubjectBind an RxJS Subject to a ref and propagate value changes both waysEXTERNAL
useSubscriptionUse an RxJS Subscription without worrying about unsubscribing from it or creating memory leaksEXTERNAL
watchExtractedObservableWatch the values of an RxJS Observable as extracted from one or more composablesEXTERNAL
@SchemaOrg
FunctionDescriptionInvocation
createSchemaOrgCreate the schema.org manager instance.EXTERNAL
useSchemaOrgUpdate schema.org reactively.EXTERNAL
@Sound
FunctionDescriptionInvocation
useSoundPlay sound effects reactively.EXTERNAL

Files

references/useKeyModifier.md

category: Sensors

useKeyModifier

Reactive Modifier State. Tracks state of any of the supported modifiers - see Browser Compatibility notes.

<CourseLink href="https://vueschool.io/lessons/alt-drag-to-clone-tasks?friend=vueuse">Learn useKeyModifier with this FREE video lesson from Vue School!</CourseLink>

Usage

import { useKeyModifier } from '@vueuse/core'

const capsLockState = useKeyModifier('CapsLock')

console.log(capsLockState.value)

Events

You can customize which events will prompt the state to update. By default, these are mouseup, mousedown, keyup, keydown. To customize these events:

import { useKeyModifier } from '@vueuse/core'

const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] })

console.log(capsLockState) // null

// Caps Lock turned on with key press
console.log(capsLockState) // null

// Mouse button clicked
console.log(capsLockState) // true

Initial State

By default, the returned ref will be Ref<null> until the first event is received. You can explicitly pass the initial state to it via:

import { useKeyModifier } from '@vueuse/core'
// ---cut---
const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>

Type Declarations

export type KeyModifier =
  | "Alt"
  | "AltGraph"
  | "CapsLock"
  | "Control"
  | "Fn"
  | "FnLock"
  | "Meta"
  | "NumLock"
  | "ScrollLock"
  | "Shift"
  | "Symbol"
  | "SymbolLock"
export interface UseModifierOptions<Initial> extends ConfigurableDocument {
  /**
   * Event names that will prompt update to modifier states
   *
   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
   */
  events?: WindowEventName[]
  /**
   * Initial value of the returned ref
   *
   * @default null
   */
  initial?: Initial
}
export type UseKeyModifierReturn<Initial> = ShallowRef<
  Initial extends boolean ? boolean : boolean | null
>
export declare function useKeyModifier<Initial extends boolean | null>(
  modifier: KeyModifier,
  options?: UseModifierOptions<Initial>,
): UseKeyModifierReturn<Initial>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

The author says: Requires Vue 3 (or above) or Nuxt 3 (or above) project

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
SerKo
Publisher
JetBrains (Official)
Distributed by
JetBrains
Source
JetBrains/skills · vueuse-functions · commit 3f53782
Licence
MIT License (redistribution allowed)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by SerKo or JetBrains.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download vueuse-functions.zip