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 A

---

Content truncated.