vueuse-functions

vueuse/vueuse · Agent Skill

Примените VueUse композиции для создания лаконичных и поддерживаемых функций Vue и Nuxt.

Перейти к установке ↓

Обзор

АвторvueuseОрганизация
Репозиторийvueuse/vueuse ↗
Папка скиллаvueuse-functions
Звёзды22 397
Форки2 956
Файлы270
ЛицензияMIT
Обновлён25 октября 2026 г.
СсылкиИсходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность
средний риск · обнаружено 1 момент, требующий внимания
Совместимость
только инструкции — подходит большинству агентов
Похожие скиллы
найдено 62 похожих скилла
Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «vueuse-functions» с mozgi.io (https://mozgi.io/skills/antfu-vueuse-functions/).

1. Скачай архив: https://mozgi.io/skills/antfu-vueuse-functions/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/vueuse/vueuse/tree/main/skills/vueuse-functions
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «vueuse-functions» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/vueuse-functions/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

Файлы скилла

270 файлов Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

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 |

Вопросы и ответы

Что делает скилл vueuse-functions?

Примените VueUse композиции для создания лаконичных и поддерживаемых функций Vue и Nuxt.

Как установить vueuse-functions?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает vueuse-functions?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому vueuse-functions подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл vueuse-functions бесплатный?

Скилл опубликован автором vueuse в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.

Похожие скиллы

Все скиллы →