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.

State#

FunctionDescriptionInvocationcreateGlobalStateKeep states in the global scope to be reusable across Vue instancesAUTOcreateInjectionStateCreate global state that can be injected into componentsAUTOcreateSharedComposableMake a composable function usable with multiple Vue instancesAUTOinjectLocalExtended inject with ability to call provideLocal to provide the value in the same componentAUTOprovideLocalExtended provide with ability to call injectLocal to obtain the value in the same componentAUTOuseAsyncStateReactive async stateAUTOuseDebouncedRefHistoryShorthand for useRefHistory with debounced filterAUTOuseLastChangedRecords the timestamp of the last changeAUTOuseLocalStorageReactive LocalStorageAUTOuseManualRefHistoryManually track the change history of a ref when the using calls commit()AUTOuseRefHistoryTrack the change history of a refAUTOuseSessionStorageReactive SessionStorageAUTOuseStorageCreate a reactive ref that can be used to access & modify LocalStorage or SessionStorageAUTOuseStorageAsyncReactive Storage in with async supportAUTOuseThrottledRefHistoryShorthand for useRefHistory with throttled filterAUTO

Elements#

FunctionDescriptionInvocationuseActiveElementReactive document.activeElementAUTOuseDocumentVisibilityReactively track document.visibilityStateAUTOuseDraggableMake elements draggableAUTOuseDropZoneCreate a zone where files can be droppedAUTOuseElementBoundingReactive bounding box of an HTML elementAUTOuseElementSizeReactive size of an HTML elementAUTOuseElementVisibilityTracks the visibility of an element within the viewportAUTOuseIntersectionObserverDetects that a target element's visibilityAUTOuseMouseInElementReactive mouse position related to an elementAUTOuseMutationObserverWatch for changes being made to the DOM treeAUTOuseParentElementGet parent element of the given elementAUTOuseResizeObserverReports changes to the dimensions of an Element's content or the border-boxAUTOuseWindowFocusReactively track window focus with window.onfocus and window.onblur eventsAUTOuseWindowScrollReactive window scrollAUTOuseWindowSizeReactive window sizeAUTO

Browser#

FunctionDescriptionInvocationuseBluetoothReactive Web Bluetooth APIAUTOuseBreakpointsReactive viewport breakpointsAUTOuseBroadcastChannelReactive BroadcastChannel APIAUTOuseBrowserLocationReactive browser locationAUTOuseClipboardReactive Clipboard APIAUTOuseClipboardItemsReactive Clipboard APIAUTOuseColorModeReactive color mode (dark / light / customs) with auto data persistenceAUTOuseCssVarManipulate CSS variablesAUTOuseDarkReactive dark mode with auto data persistenceAUTOuseEventListenerUse EventListener with easeAUTOuseEyeDropperReactive EyeDropper APIAUTOuseFaviconReactive faviconAUTOuseFileDialogOpen file dialog with easeAUTOuseFileSystemAccessCreate and read and write local files with FileSystemAccessAPIAUTOuseFullscreenReactive Fullscreen APIAUTOuseGamepadProvides reactive bindings for the Gamepad APIAUTOuseImageReactive load an image in the browserAUTOuseMediaControlsReactive media controls for both audio and video elementsAUTOuseMediaQueryReactive Media QueryAUTOuseMemoryReactive Memory InfoAUTOuseObjectUrlReactive URL representing an objectAUTOusePerformanceObserverObserve performance metricsAUTOusePermissionReactive Permissions APIAUTOusePreferredColorSchemeReactive prefers-color-scheme media queryAUTOusePreferredContrastReactive prefers-contrast media queryAUTOusePreferredDarkReactive dark theme preferenceAUTOusePreferredLanguagesReactive Navigator LanguagesAUTOusePreferredReducedMotionReactive prefers-reduced-motion media queryAUTOusePreferredReducedTransparencyReactive prefers-reduced-transparency media queryAUTOuseScreenOrientationReactive Screen Orientation APIAUTOuseScreenSafeAreaReactive env(safe-area-inset-*)AUTOuseScriptTagCreates a script tagAUTOuseShareReactive Web Share APIAUTOuseStyleTagInject reactive style element in headAUTOuseTextareaAutosizeAutomatically update the height of a textarea depending on the contentAUTOuseTextDirectionReactive dir of the element's textAUTOuseTitleReactive document titleAUTOuseUrlSearchParamsReactive URLSearchParamsAUTOuseVibrateReactive Vibration APIAUTOuseWakeLockReactive Screen Wake Lock APIAUTOuseWebNotificationReactive NotificationAUTOuseWebWorkerSimple Web Workers registration and communicationAUTOuseWebWorkerFnRun expensive functions without blocking the UIAUTO

Sensors#

FunctionDescriptionInvocationonClickOutsideListen for clicks outside of an elementAUTOonElementRemovalFires when the element or any element containing it is removed from the DOMAUTOonKeyStrokeListen for keyboard keystrokesAUTOonLongPressListen for a long press on an elementAUTOonStartTypingFires when users start typing on non-editable elementsAUTOuseBatteryReactive Battery Status APIAUTOuseDeviceMotionReactive DeviceMotionEventAUTOuseDeviceOrientationReactive DeviceOrientationEventAUTOuseDevicePixelRatioReactively track window.devicePixelRatioAUTOuseDevicesListReactive enumerateDevices listing available input/output devicesAUTOuseDisplayMediaReactive mediaDevices.getDisplayMedia streamingAUTOuseElementByPointReactive element by pointAUTOuseElementHoverReactive element's hover stateAUTOuseFocusReactive utility to track or set the focus state of a DOM elementAUTOuseFocusWithinReactive utility to track if an element or one of its decendants has focusAUTOuseFpsReactive FPS (frames per second)AUTOuseGeolocationReactive Geolocation APIAUTOuseIdleTracks whether the user is being inactiveAUTOuseInfiniteScrollInfinite scrolling of the elementAUTOuseKeyModifierReactive Modifier StateAUTOuseMagicKeysReactive keys pressed stateAUTOuseMouseReactive mouse positionAUTOuseMousePressedReactive mouse pressing stateAUTOuseNavigatorLanguageReactive navigator.languageAUTOuseNetworkReactive Network statusAUTOuseOnlineReactive online stateAUTOusePageLeaveReactive state to show whether the mouse leaves the pageAUTOuseParallaxCreate parallax effect easilyAUTO