vueuse-functions

antfu

•

4.5k2334 months ago

Source Raw

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

Quick Install

npxskills add antfu/skills--skill vueuse-functions

Instructions

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 to provide the value in the same component

Elements

Function	Description	Invocation
`useActiveElement`	Reactive `document.activeElement`	AUTO
`useDocumentVisibility`	Reactively track `document.visibilityState`	AUTO
`useDraggable`	Make elements draggable	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

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 from the DOM	AUTO
`onKeyStroke`	Listen for keyboard keystrokes	AUTO
`onLongPress`	Listen for a long press on an element	AUTO
`onStartTyping`

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 that increases on every interval	AUTO
`useIntervalFn`	Wrapper for `setInterval` with controls	AUTO
`useNow`	Reactive current Date instance

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`

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

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 param

Array

Function	Description	Invocation
`useArrayDifference`	Reactive get array difference of two arrays	AUTO
`useArrayEvery`	Reactive `Array.every`	AUTO
`useArrayFilter`	Reactive `Array.filter`	AUTO
`useArrayFind`

Time

Function	Description	Invocation
`useCountdown`	Reactive countdown timer in seconds	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
`createDisposableDirective`	Utility for authoring disposable directives	AUTO
`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

@Electron

Function	Description	Invocation
`useIpcRenderer`	Provides ipcRenderer and all of its APIs with Vue reactivity	EXTERNAL
`useIpcRendererInvoke`	Reactive ipcRenderer.invoke API result	EXTERNAL
`useIpcRendererOn`	Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted	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`

@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`

@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.

@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 `ref`s	EXTERNAL
`toObserver`	Sugar function to convert a `ref` into an RxJS Observer	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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360