vueuse-shared-skilld

v2026.09.25

Use when writing, reviewing, or debugging code that imports from "@vueuse/shared" (or its utilities re-exported by "@vueuse/core"). Provides the v15.0.0 API surface, debounce and throttle defaults, watch variants, state-sharing patterns, and v14 to v15 migration rules.

GitHub
安装命令
npx skhub add skilld-dev/vueuse-shared-skilld
Markdown
SKILL.md

@vueuse/shared 15.0.0

Framework-agnostic reactive utilities for Vue. Peer dependency vue ^3.5.0 (package.json:40). ESM-only: "type": "module" and no CJS build in dist (package.json:2). Requires Node.js >= 22 (package.json:37).

Source citations like dist/index.js:904 refer to the prepared package source. Function docs: https://vueuse.org/<functionName>.

Critical v15 rules

  • useThrottleFn default trailing changed from false to true in v15.0.0. Defaults are now ms = 200, trailing = true, leading = true, rejectOnCancel = false (dist/index.js:904). Release: https://github.com/vueuse/vueuse/releases/tag/v15.0.0 To get v14 leading-edge-only behavior, pass trailing = false explicitly.
  • computedEager / eagerComputed are deprecated and slated for removal. Use Vue 3.4+ computed instead (dist/index.d.ts:5-18).
  • watchPausable / pausableWatch are deprecated on every overload. Use Vue's built-in watch, whose handle already has pause() and resume() (dist/index.js:1021, dist/index.d.ts:1459-1466).
  • Prefer primary names over deprecated aliases; see the table in migration-v15.
  • Timer composables are no-ops on the server: useIntervalFn and useTimeoutFn only start timers when isClient (dist/index.js:1654, dist/index.js:1726-1729).

Common tasks

import { useDebounceFn, useThrottleFn } from '@vueuse/shared'

// Debounced fn: returns a promise; cancel/flush/isPending attached
const search = useDebounceFn(query => fetchApi(query), 300, { maxWait: 1000 })

// Rate-limit scroll/resize; v15 fires on BOTH edges by default
const onScroll = useThrottleFn(handler, 200)          // leading + trailing
const onScrollV14 = useThrottleFn(handler, 200, false) // trailing=false, v14 style
import { until, whenever } from '@vueuse/shared'

// One-shot async flow control instead of manual watchers
await until(isReady).toBe(true, { timeout: 5000, throwOnTimeout: true })

// Runs only while truthy; { once: true } auto-stops after the first run
whenever(isReady, data => render(data), { once: true })
import { createInjectionState } from '@vueuse/shared'

// Typed provide/inject pair without manual InjectionKey
const [useProvideStore, useStore] = createInjectionState(() => {
  const count = ref(0)
  return { count, inc: () => count.value++ }
}, { defaultValue: { count: ref(0), inc: () => {} } })
import { refManualReset, syncRef } from '@vueuse/shared'

const message = refManualReset('idle')   // message.reset() restores 'idle'
const num = ref(10), str = ref('10')
syncRef(num, str, {                       // transform is required when
  transform: {                            // types differ (type-level check)
    ltr: v => String(v),
    rtl: v => Number(v),
  },
})

More worked patterns: reactivity-utilities, watch-utilities.

Choosing state-sharing tools

ToolLifetimeUse when
createGlobalStateApp lifetime, never disposed (dist/index.js:169-180)App-wide singleton state
createSharedComposableDisposed when last subscriber leaves (dist/index.js:583-605)One shared instance of a composable, e.g. one useMouse
createInjectionStateTied to component treeTyped provider/consumer stores
provideLocal / injectLocalSame component or scopeProvide and inject within one component

SSR: createSharedComposable falls back to the plain composable on the server, so every request gets fresh state (dist/index.js:584). Details: state-sharing.

References

发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.25

发布时间

Sep 25, 2026

分类

未分类

许可证

MIT

源路径

skills/vueuse-shared-skilld

默认分支

main

最新提交

c8994af

Tree SHA

78224cb