--- name: vueuse-functions description: Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features. license: MIT metadata: author: SerKo version: "1.0" 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](https://vueuse.org/) 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`](references/createGlobalState.md) | Keep states in the global scope to be reusable across Vue instances | AUTO | | [`createInjectionState`](references/createInjectionState.md) | Create global state that can be injected into components | AUTO | | [`createSharedComposable`](references/createSharedComposable.md) | Make a composable function usable with multiple Vue instances | AUTO | | [`injectLocal`](references/injectLocal.md) | Extended `inject` with ability to call `provideLocal` to provide the value in the same component | AUTO | | [`provideLocal`](references/provideLocal.md) | Extended `provide` with ability to call `injectLocal` to obtain the value in the same component | AUTO | | [`useAsyncState`](references/useAsyncState.md) | Reactive async state | AUTO | | [`useDebouncedRefHistory`](references/useDebouncedRefHistory.md) | Shorthand for `useRefHistory` with debounced filter | AUTO | | [`useLastChanged`](references/useLastChanged.md) | Records the timestamp of the last change | AUTO | | [`useLocalStorage`](references/useLocalStorage.md) | Reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) | AUTO | | [`useManualRefHistory`](references/useManualRefHistory.md) | Manually track the change history of a ref when the user calls `commit()` | AUTO | | [`useRefHistory`](references/useRefHistory.md) | Track the change history of a ref | AUTO | | [`useSessionStorage`](references/useSessionStorage.md) | Reactive [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO | | [`useStorage`](references/useStorage.md) | Create a reactive ref that can be used to access & modify [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or [SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) | AUTO | | [`useStorageAsync`](references/useStorageAsync.md) | Reactive Storage with async support | AUTO | | [`useThrottledRefHistory`](references/useThrottledRefHistory.md) | Shorthand for `useRefHistory` with throttled filter | AUTO | ### Elements | Function | Description | Invocation | | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | ---------- | | [`useActiveElement`](references/useActiveElement.md) | Reactive `document.activeElement` | AUTO | | [`useDocumentVisibility`](references/useDocumentVisibility.md) | Reactively track [`document.visibilityState`](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState) | AUTO | | [`useDraggable`](references/useDraggable.md) | Make elements draggable | AUTO | | [`useDropZone`](references/useDropZone.md) | Create a zone where files can be dropped | AUTO | | [`useElementBounding`](references/useElementBounding.md) | Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element | AUTO | | [`useElementSize`](references/useElementSize.md) | Reactive size of an HTML element | AUTO | | [`useElementVisibility`](references/useElementVisibility.md) | Tracks the visibility of an element within the viewport | AUTO | | [`useIntersectionObserver`](references/useIntersectionObserver.md) | Detects changes to a target element's visibility | AUTO | | [`useMouseInElement`](references/useMouseInElement.md) | Reactive mouse position related to an element | AUTO | | [`useMutationObserver`](references/useMutationObserver.md) | Watch for changes being made to the DOM tree | AUTO | | [`useParentElement`](references/useParentElement.md) | Get parent element of the given element | AUTO | | [`useResizeObserver`](references/useResizeObserver.md) | Reports changes to the dimensions of an Element's content or the border-box | AUTO | | [`useWindowFocus`](references/useWindowFocus.md) | Reactively track window focus with `window.onfocus` and `window.onblur` events | AUTO | | [`useWindowScroll`](references/useWindowScroll.md) | Reactive window scroll | AUTO | | [`useWindowSize`](references/useWindowSize.md) | Reactive window size | AUTO | ### Browser | Function | Description | Invocation | | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | | [`useBluetooth`](references/useBluetooth.md) | Reactive [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) | AUTO | | [`useBreakpoints`](references/useBreakpoints.md) | Reactive viewport breakpoints | AUTO | | [`useBroadcastChannel`](references/useBroadcastChannel.md) | Reactive [BroadcastChannel API](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) | AUTO | | [`useBrowserLocation`](references/useBrowserLocation.md) | Reactive browser location | AUTO | | [`useClipboard`](references/useClipboard.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO | | [`useClipboardItems`](references/useClipboardItems.md) | Reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) | AUTO | | [`useColorMode`](references/useColorMode.md) | Reactive color mode (dark / light / customs) with auto data persistence | AUTO | | [`useCssSupports`](references/useCssSupports.md) | SSR compatible and reactive [`CSS.supports`](https://developer.mozilla.org/docs/Web/API/CSS/supports_static) | AUTO | | [`useCssVar`](references/useCssVar.md) | Manipulate CSS variables | AUTO | | [`useDark`](references/useDark.md) | Reactive dark mode with auto data persistence | AUTO | | [`useEventListener`](references/useEventListener.md) | Use EventListener with ease | AUTO | | [`useEyeDropper`](references/useEyeDropper.md) | Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API) | AUTO | | [`useFavicon`](references/useFavicon.md) | Reactive favicon | AUTO | | [`useFileDialog`](references/useFileDialog.md) | Open file dialog with ease | AUTO | | [`useFileSystemAccess`](references/useFileSystemAccess.md) | Create and read and write local files with [FileSystemAccessAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) | AUTO | | [`useFullscreen`](references/useFullscreen.md) | Reactive [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) | AUTO | | [`useGamepad`](references/useGamepad.md) | Provides reactive bindings for the [Gamepad API](https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API) | AUTO | | [`useImage`](references/useImage.md) | Reactive load an image in the browser | AUTO | | [`useMediaControls`](references/useMediaControls.md) | Reactive media controls for both `audio` and `video` elements | AUTO | | [`useMediaQuery`](references/useMediaQuery.md) | Reactive [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) | AUTO | | [`useMemory`](references/useMemory.md) | Reactive Memory Info | AUTO | | [`useObjectUrl`](references/useObjectUrl.md) | Reactive URL representing an object | AUTO | | [`usePerformanceObserver`](references/usePerformanceObserver.md) | Observe performance metrics | AUTO | | [`usePermission`](references/usePermission.md) | Reactive [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) | AUTO | | [`usePreferredColorScheme`](references/usePreferredColorScheme.md) | Reactive [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) media query | AUTO | | [`usePreferredContrast`](references/usePreferredContrast.md) | Reactive [prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) media query | AUTO | | [`usePreferredDark`](references/usePreferredDark.md) | Reactive dark theme preference