vueuse-functions

vueuse/vueuse · Agent Skill

Utilizza le composizioni di VueUse per creare funzioni Vue e Nuxt concise e manutenibili.

Panoramica

Autore	vueuseOrganizzazione
Repository	vueuse/vueuse ↗
Cartella dello skill	`vueuse-functions`
Stelle	22.397
Fork	2956
File inclusi	270
Licenza	MIT
Aggiornato	25 ottobre 2026
Link	Sorgente dello skill ↗ · Repository ↗

Verifica Mozgi

Cosa abbiamo trovato nei file dello skill. I dettagli con l’abbonamento.

Sicurezza

rischio medio · 1 punto richiede attenzione

Compatibilità

solo istruzioni — funziona con la maggior parte degli agenti

Skill simili

62 skill simili trovati

Inoltre con l’abbonamento

Installazione

Uno skill è una cartella con un file SKILL.md. Scegli il tuo agente ed esegui i comandi in un terminale (macOS, Linux o Git Bash su Windows) dalla radice del progetto.

Incolla il prompt in Claude, Codex o un altro assistente: controllerà lo skill e lo installerà.

Install the “vueuse-functions” skill from mozgi.io (https://mozgi.io/skills/antfu-vueuse-functions/) for me.

1. Download the archive: https://mozgi.io/skills/antfu-vueuse-functions/download
   If it fails, take the skill folder from the source: https://github.com/vueuse/vueuse/tree/main/skills/vueuse-functions
2. Read SKILL.md and the other files. Check the skill is safe: no hidden commands, no sending data elsewhere, no scripts doing something other than described. If anything looks suspicious, stop and tell me.
3. Put the “vueuse-functions” folder into your agent's skills folder: .claude/skills/ for Claude Code, .agents/skills/ for Codex, .cursor/skills/ for Cursor, .gemini/skills/ for Gemini CLI. Inside the project if we are in one, otherwise in the home folder (~/.claude/skills/ etc.).
4. Make sure <skills folder>/vueuse-functions/SKILL.md exists.
5. Briefly tell me what this skill does and offer to try it on my task.

If you cannot do a step yourself, tell me what to click or type.

git clone --depth 1 --branch main https://github.com/vueuse/vueuse.git /tmp/vueuse
mkdir -p .claude/skills
cp -r /tmp/vueuse/skills/vueuse-functions .claude/skills/vueuse-functions

Riavvia Claude Code: lo skill compare nell'elenco; per richiamarlo a mano usa /vueuse-functions. Per tutti i progetti: ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/vueuse/vueuse.git /tmp/vueuse
mkdir -p .agents/skills
cp -r /tmp/vueuse/skills/vueuse-functions .agents/skills/vueuse-functions

Codex cerca gli skill in .agents/skills dalla cartella corrente fino alla radice del repo; richiamalo con /skills o $vueuse-functions. Per tutti i progetti: ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/vueuse/vueuse.git /tmp/vueuse
mkdir -p .cursor/skills
cp -r /tmp/vueuse/skills/vueuse-functions .cursor/skills/vueuse-functions

Cursor carica lo skill all'avvio; richiamalo con “/” nella chat Agent. Cursor legge anche .claude/skills e .agents/skills. Per tutti i progetti: ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/vueuse/vueuse.git /tmp/vueuse
mkdir -p .gemini/skills
cp -r /tmp/vueuse/skills/vueuse-functions .gemini/skills/vueuse-functions

Gemini CLI propone di attivare lo skill quando il compito corrisponde: tu confermi. Per tutti i progetti: ~/.gemini/skills.

File dello skill

270 file Scarica ZIP

Leggi SKILL.md e i file correlati prima di installare. Clicca un file per l'anteprima.

Contenuto di SKILL.md

Testo originale dell'autore · sola lettura

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 user 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 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 |

| useElementOverflow ↗ | Reactive element's overflow state | AUTO |

| useElementSize ↗ | Reactive size of an HTML element | AUTO |

| useElementVisibility ↗ | Tracks the visibility of an element within the viewport | AUTO |

| useIntersectionObserver ↗ | Detects changes to 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 |

| useLiveAnnouncer ↗ | Accessible way to announce messages to screen reader users (ARIA live regions) | 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 API ↗ | AUTO |

| useScreenSafeArea ↗ | Reactive env(safe-area-inset-*) | AUTO |

| useScriptTag ↗ | Creates a script tag | AUTO |

| useShare ↗ | Reactive Web Share API ↗ | AUTO |

| useSSRWidth ↗ | Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery ↗ or useBreakpoints ↗ | AUTO |

| useStyleTag ↗ | Inject reactive style element in head | AUTO |

| useTextareaAutosize ↗ | Automatically update the height of a textarea depending on the content | AUTO |

| useTextDirection ↗ | Reactive dir ↗ of the element's text | AUTO |

| useTitle ↗ | Reactive document title | AUTO |

| useUrlSearchParams ↗ | Reactive URLSearchParams ↗ | AUTO |

| useVibrate ↗ | Reactive Vibration API ↗ | AUTO |

| useWakeLock ↗ | Reactive Screen Wake Lock API ↗ | AUTO |

| useWebMCP ↗ | Register a WebMCP ↗ tool and tie its lifecycle to the current Vue scope | AUTO |

| useWebNotification ↗ | Reactive Notification ↗ | AUTO |

| useWebWorker ↗ | Simple Web Workers ↗ registration and communication | AUTO |

| useWebWorkerFn ↗ | Run expensive functions without blocking the UI | AUTO |

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 ↗ | Fires when users start typing on non-editable elements | AUTO |

| useBattery ↗ | Reactive Battery Status API ↗ | AUTO |

| useDeviceMotion ↗ | Reactive DeviceMotionEvent ↗ | AUTO |

| useDeviceOrientation ↗ | Reactive DeviceOrientationEvent ↗ | AUTO |

| useDevicePixelRatio ↗ | Reactively track window.devicePixelRatio ↗ | AUTO |

| useDevicesList ↗ | Reactive enumerateDevices ↗ listing available input/output devices | AUTO |

| useDisplayMedia ↗ | Reactive mediaDevices.getDisplayMedia ↗ streaming | AUTO |

| useElementByPoint ↗ | Reactive element by point | AUTO |

| useElementHover ↗ | Reactive element's hover state | AUTO |

| useFocus ↗ | Reactive utility to track or set the focus state of a DOM element | AUTO |

| useFocusWithin ↗ | Reactive utility to track if an element or one of its descendants has focus | AUTO |

| useFps ↗ | Reactive FPS (frames per second) | AUTO |

| useGeolocation ↗ | Reactive Geolocation API ↗ | AUTO |

| useIdle ↗ | Tracks whether the user is being inactive | AUTO |

| useInfiniteScroll ↗ | Infinite scrolling of the element | AUTO |

| useKeyModifier ↗ | Reactive Modifier State ↗ | AUTO |

| useMagicKeys ↗ | Reactive keys pressed state | AUTO |

| useMouse ↗ | Reactive mouse position | AUTO |

| useMousePressed ↗ | Reactive mouse pressing state | AUTO |

| useNavigatorLanguage ↗ | Reactive navigator.language ↗ | AUTO |

| useNetwork ↗ | Reactive Network status ↗ | AUTO |

| useOnline ↗ | Reactive online state | AUTO |

| usePageLeave ↗ | Reactive state to show whether the mouse leaves the page | AUTO |

| useParallax ↗ | Create parallax effect easily | AUTO |

| usePointer ↗ | Reactive pointer state ↗ | AUTO |

| usePointerLock ↗ | Reactive pointer lock ↗ | AUTO |

| usePointerSwipe ↗ | Reactive swipe detection based on PointerEvents ↗ | AUTO |

| useScroll ↗ | Reactive scroll position and state | AUTO |

| useScrollLock ↗ | Lock scrolling of the element | AUTO |

| useSpeechRecognition ↗ | Reactive SpeechRecognition ↗ | AUTO |

| useSpeechSynthesis ↗ | Reactive SpeechSynthesis ↗ | AUTO |

| useSwipe ↗ | Reactive swipe detection based on TouchEvents ↗ | AUTO |

| useTextSelection ↗ | Reactively track user text selection based on Window.getSelection ↗ | AUTO |

| useUserMedia ↗ | Reactive mediaDevices.getUserMedia ↗ streaming | AUTO |

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 | AUTO |

| useRafFn ↗ | Call function on every requestAnimationFrame | AUTO |

| useTimeout ↗ | Reactive value that becomes true after a given time | AUTO |

| useTimeoutFn ↗ | Wrapper for setTimeout with controls | AUTO |

| useTimestamp ↗ | Reactive current timestamp | AUTO |

| useTransition ↗ | Transition between values | AUTO |

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 |

| tryOnBeforeMount ↗ | Safe onBeforeMount | AUTO |

| tryOnBeforeUnmount ↗ | Safe onBeforeUnmount | AUTO |

| tryOnMounted ↗ | Safe onMounted | AUTO |

| tryOnScopeDispose ↗ | Safe onScopeDispose | AUTO |

| tryOnUnmounted ↗ | Safe onUnmounted | AUTO |

| unrefElement ↗ | Retrieves the underlying DOM element from a Vue ref or component instance | AUTO |

| useCurrentElement ↗ | Get the DOM element of current component as a ref | AUTO |

| useMounted ↗ | Mounted state in ref | AUTO |

| useTemplateRefsList ↗ | Shorthand for binding refs to template elements and components inside v-for | AUTO |

| useVirtualList ↗ | Create virtual lists with ease | AUTO |

| useVModel ↗ | Shorthand for v-model binding | AUTO |

| useVModels ↗ | Shorthand for props v-model binding | AUTO |

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 |

| watchDeep ↗ | Shorthand for watching value with {deep: true} | AUTO |

| watchIgnorable ↗ | Ignorable watch | AUTO |

| watchImmediate ↗ | Shorthand for watching value with {immediate: true} | AUTO |

| watchOnce ↗ | Shorthand for watching value with { once: true } | AUTO |

| watchPausable ↗ | Pausable watch | AUTO |

| watchThrottled ↗ | Throttled watch | AUTO |

| watchTriggerable ↗ | Watch that can be triggered manually | AUTO |

| watchWithFilter ↗ | watch with additional EventFilter control | AUTO |

| whenever ↗ | Shorthand for watching value to be truthy | 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 deep param | AUTO |

| extendRef ↗ | Add extra attributes to Ref | AUTO |

| reactify ↗ | Converts plain functions into reactive functions | AUTO |

| reactifyObject ↗ | Apply reactify to an object | AUTO |

| reactiveComputed ↗ | Computed reactive object | AUTO |

| reactiveOmit ↗ | Reactively omit fields from a reactive object | AUTO |

| reactivePick ↗ | Reactively pick fields from a reactive object | AUTO |

| refAutoReset ↗ | A ref which will be reset to the default value after some time | AUTO |

| refDebounced ↗ | Debounce execution of a ref value | AUTO |

| refDefault ↗ | Apply default value to a ref | AUTO |

| refManualReset ↗ | Create a ref with manual reset functionality | AUTO |

| refThrottled ↗ | Throttle changing of a ref value | AUTO |

| refWithControl ↗ | Fine-grained controls over ref and its reactivity | AUTO |

| syncRef ↗ | Two-way refs synchronization | AUTO |

| syncRefs ↗ | Keep target refs in sync with a source ref | AUTO |

| toReactive ↗ | Converts ref to reactive | AUTO |

| toRef ↗ | Normalize value/ref/getter to ref or computed | EXPLICIT_ONLY |

| toRefs ↗ | Extended toRefs ↗ that also accepts refs of an object | AUTO |

Array

| Function | Description | Invocation |

|----------|-------------|------------|

| useArrayDifference ↗ | Reactive get array difference of two arrays | AUTO |

| useArrayEvery ↗ | Reactive Array.every | AUTO |

| useArrayFilter ↗ | Reactive Array.filter | AUTO |

| useArrayFind ↗ | Reactive Array.find | AUTO |

| useArrayFindIndex ↗ | Reactive Array.findIndex | AUTO |

| useArrayFindLast ↗ | Reactive Array.findLast | AUTO |

| useArrayIncludes ↗ | Reactive Array.includes | AUTO |

| useArrayJoin ↗ | Reactive Array.join | AUTO |

| useArrayMap ↗ | Reactive Array.map | AUTO |

| useArrayReduce ↗ | Reactive Array.reduce | AUTO |

| useArraySome ↗ | Reactive Array.some | AUTO |

| useArrayUnique ↗ | Reactive unique array | AUTO |

| useSorted ↗ | Reactive sort array | AUTO |

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 |

| useTemporalNow ↗ | Reactive Temporal API ↗ with timezone conversion and calendar system support | 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 |

| isDefined ↗ | Non-nullish checking type guard for Ref | AUTO |

| makeDestructurable ↗ | Make isomorphic destructurable for object and array at the same time | AUTO |

| set ↗ | Shorthand for ref.value = x | EXPLICIT_ONLY |

| useAsyncQueue ↗ | Executes each asynchronous task sequentially and passes the current task result to the next task | AUTO |

| useBase64 ↗ | Reactive base64 transforming | AUTO |

| useCached ↗ | Cache a ref with a custom comparator | AUTO |

| useCloned ↗ | Reactive clone of a ref | AUTO |

| useConfirmDialog ↗ | Creates event hooks to support modals and confirmation dialog chains | AUTO |

| useCounter ↗ | Basic counter with utility functions | AUTO |

| useCycleList ↗ | Cycle through a list of items | AUTO |

| useDebounceFn ↗ | Debounce execution of a function | AUTO |

| useEventBus ↗ | A basic event bus | AUTO |

| useMemoize ↗ | Cache results of functions depending on arguments and keep it reactive | AUTO |

| useOffsetPagination ↗ | Reactive offset pagination | AUTO |

| usePrevious ↗ | Holds the previous value of a ref | AUTO |

| useStepper ↗ | Provides helpers for building a multi-step wizard interface | AUTO |

| useSupported ↗ | SSR compatibility isSupported | AUTO |

| useThrottleFn ↗ | Throttle execution of a function | AUTO |

| useTimeoutPoll ↗ | Use timeout to poll something | AUTO |

| useToggle ↗ | A boolean switcher with utility functions | AUTO |

| useToNumber ↗ | Reactively convert a string ref to number | AUTO |

| useToString ↗ | Reactively convert a ref to string | AUTO |

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

| useZoomFactor ↗ | Reactive WebFrame ↗ zoom factor | EXTERNAL |

| useZoomLevel ↗ | Reactive WebFrame ↗ zoom level | 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 ↗ | EXTERNAL |

| useCookies ↗ | Wrapper for universal-cookie ↗ | EXTERNAL |

| useDrauu ↗ | Reactive instance for drauu ↗ | EXTERNAL |

| useFocusTrap ↗ | Reactive wrapper for focus-trap ↗ | EXTERNAL |

| useFuse ↗ | Easily implement fuzzy search using a composable with Fuse.js ↗ | EXTERNAL |

| useIDBKeyval ↗ | Wrapper for idb-keyval ↗ | EXTERNAL |

| useJwt ↗ | Wrapper for jwt-decode ↗ | EXTERNAL |

| useNProgress ↗ | Reactive wrapper for nprogress ↗ | EXTERNAL |

| useQRCode ↗ | Wrapper for qrcode ↗ | EXTERNAL |

| useSortable ↗ | Wrapper for sortable ↗ | EXTERNAL |

@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 ↗ | NOT condition for ref | EXTERNAL |

| logicOr ↗ | OR conditions for refs | EXTERNAL |

| useAbs ↗ | Reactive Math.abs | EXTERNAL |

| useAverage ↗ | Get the average of an array reactively | EXTERNAL |

| useCeil ↗ | Reactive Math.ceil | EXTERNAL |

| useClamp ↗ | Reactively clamp a value between two other values | EXTERNAL |

| useFloor ↗ | Reactive Math.floor | EXTERNAL |

| useMath ↗ | Reactive Math methods | EXTERNAL |

| useMax ↗ | Reactive Math.max | EXTERNAL |

| useMin ↗ | Reactive Math.min | EXTERNAL |

| usePrecision ↗ | Reactively set the precision of a number | EXTERNAL |

| useProjection ↗ | Reactive numeric projection from one domain to another | EXTERNAL |

| useRound ↗ | Reactive Math.round | EXTERNAL |

| useSum ↗ | Get the sum of an array reactively | EXTERNAL |

| useTrunc ↗ | Reactive Math.trunc | EXTERNAL |

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

| useMotionVariants ↗ | Handle the Variants state and selection. | EXTERNAL |

| useSpring ↗ | Spring animations. | EXTERNAL |

@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 refs | EXTERNAL |

| toObserver ↗ | Sugar function to convert a ref into an RxJS Observer ↗ | EXTERNAL |

| useExtractedObservable ↗ | Use an RxJS Observable ↗ as extracted from one or more composables | EXTERNAL |

| useObservable ↗ | Use an RxJS Observable ↗ | EXTERNAL |

| useSubject ↗ | Bind an RxJS Subject ↗ to a ref and propagate value changes both ways | EXTERNAL |

| useSubscription ↗ | Use an RxJS Subscription ↗ without worrying about unsubscribing from it or creating memory leaks | EXTERNAL |

| watchExtractedObservable ↗ | Watch the values of an RxJS Observable ↗ as extracted from one or more composables | 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 |

Domande frequenti

Che cosa fa lo skill vueuse-functions?

Utilizza le composizioni di VueUse per creare funzioni Vue e Nuxt concise e manutenibili.

Come si installa vueuse-functions?

Apri il blocco “Installazione” in questa pagina e scegli il tuo agente — Claude Code, Codex, Cursor o Gemini CLI — per i comandi pronti che copiano la cartella dello skill nel posto giusto. Oppure copia il prompt dalla scheda “Con l'assistente” e lascia che sia l'assistente a controllare e installare lo skill.

Con quali modelli AI funziona vueuse-functions?

Gli skill sono semplici istruzioni in Markdown (formato Agent Skills), quindi vueuse-functions funziona con qualsiasi agente che legge SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode e altri. Il modello carica le istruzioni solo quando il compito corrisponde alla descrizione dello skill.

vueuse-functions è gratuito?

Lo skill è pubblicato apertamente da vueuse con licenza MIT. Lo skill in sé non costa nulla: paghi solo il tuo fornitore AI per i token usati.

È sicuro installare gli skill?

Uno skill è un insieme di istruzioni che il tuo agente seguirà: leggi SKILL.md e i file correlati prima di installarlo. Gli script nella cartella dello skill vengono eseguiti solo se li esegue l'agente: controlla cosa fa e non concedere permessi superflui.

In cosa differisce uno skill da un server MCP o da un plugin?

Un server MCP o un plugin danno al modello nuovi strumenti: codice che viene eseguito e restituisce un risultato. Uno skill fornisce conoscenza e metodo: come affrontare il compito, quali passi seguire e com'è un buon risultato. Non servono server né chiavi API.

Skill correlati

Tutti gli skill →

to-prd Converte la conversazione in un ticket tecnico e lo pubblica nel sistema di tracciamento degli errori. mattpocock304k

tdd Il flusso di lavoro del refactoring rosso-verde per la costruzione di funzioni e la correzione di una fetta alla volta. mattpocock304k

diagnosing-bugs Diagnostica sistematica degli errori attraverso la riproduzione, la minimizzazione, l'ipotesi, la strumentazione e la correzione. mattpocock304k

domain-modeling Crea e perfeziona modelli di dominio del progetto e terminologia. mattpocock304k

ask-matt Il router che sceglie il flusso di ingegneria Matt Pocock appropriato per l'attuale compito. mattpocock304k

next-cache-components Includere i componenti della cache nell'applicazione Next.js ed eliminare le route bloccanti individuate durante l'adozione. vercel143k