vueuse-functions

vueuse/vueuse · Agent Skill

使用 VueUse 組合來建立簡潔且易於維護的 Vue 和 Nuxt 函式。

前往安裝 ↓

總覽

發布者vueuse組織
儲存庫vueuse/vueuse ↗
技能資料夾vueuse-functions
星22,397
分支2,956
附帶檔案270
授權MIT
最近更新2026年10月25日
連結技能原始碼 ↗ · 儲存庫 ↗

Mozgi 檢查

我們在技能檔案中發現的內容。詳細資訊需訂閱。

安全性
中等風險 · 發現 1 個需要注意的地方
相容性
僅含說明 — 適用於多數代理
相似技能
找到 62 個相似技能
訂閱另含

安裝

技能就是一個含 SKILL.md 的資料夾。選擇你的代理,在專案根目錄的終端機(macOS、Linux 或 Windows 的 Git Bash)執行指令。

把提示貼到 Claude、Codex 或其他助理:它會自行檢查並安裝技能。

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.

技能檔案

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 適用哪些 AI 模型?

技能是純 Markdown 指示(Agent Skills 格式),因此 vueuse-functions 適用任何讀取 SKILL.md 的代理:Claude Code、Codex、Cursor、Gemini CLI、GitHub Copilot、OpenCode 等。只有在任務符合技能描述時,模型才會載入指示。

vueuse-functions 是免費的嗎?

此技能由 vueuse 公開發布,採用 MIT 授權。技能本身免費 — 你只需向 AI 供應商支付實際使用的 token 費用。

安裝技能安全嗎?

技能是代理會遵循的指示,安裝前請閱讀 SKILL.md 及相關檔案。技能資料夾中的腳本只有在代理執行時才會運行 — 留意它的動作,不要授予多餘權限。

技能和 MCP 伺服器或外掛有何不同?

MCP 伺服器或外掛為模型提供新工具 — 會執行並回傳結果的程式碼。技能提供的是知識與流程:如何處理任務、要遵循哪些步驟、好的成果長什麼樣子。它不需要伺服器或 API 金鑰。

相關技能

所有技能 →