mcpField
V
vueuse-core-skilld

vueuse-core-skilld

github.com/skilld-devDevelopment184217 installsUpdated 3w ago
Repository

About vueuse-core-skilld

vueuse-core-skilld is a developer skill reference for @vueuse/core 15.0.0, aimed at developers using Vue composables. It documents common browser and reactive utilities, v15 behavior changes and migration notes, including a useWebMCP example.

Key features

  1. 01Local storage, theme and title management
  2. 02Throttling and configurable schedulers
  3. 03WebSocket and event-source handling
  4. 04useWebMCP tool registration
  5. 05v14-to-v15 migration notes

Use cases

  1. 01Store and merge local settings
  2. 02Update the page title from reactive state
  3. 03Control timer or animation-frame tasks
  4. 04Register a WebMCP tool for browser agents

MCP support

The reference includes a useWebMCP example for registering a WebMCP tool for browser agents.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/skilld-dev/vue-ecosystem-skills --skill vueuse-core-skilld

After installing, type/vueuse-core-skilldin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
api-surface.md
best-practice.md
migration-v15.md
new-functions-v15.md
shared-api.md

Details

From the project README

@vueuse/core 15.0.0

Prepared source: @vueuse/[email protected] (package.json:4). File citations below use paths relative to that package root. Docs citations are absolute URLs.

Environment limits

  • ESM-only since v13 ("type": "module", package.json:3). require() fails.
  • Requires Vue ^3.5.0 (package.json:42).
  • Requires Node.js >= 22 (package.json:39); Node 20 support dropped in v15.0.0 (release).
  • Exports: . and ./metadata (package.json:24-28). Everything ships from dist/.
  • @vueuse/[email protected] is a dependency and fully re-exported (dist/index.d.ts:3), so import { useToggle } from '@vueuse/core' works; see shared API.

v15 rules that change generated code

  1. No templateRef. Removed in v15.0.0 (release). Use Vue's built-in useTemplateRef() instead.
  2. Timer options are gone; pass scheduler. The deprecated per-composable interval / immediate options were removed from ConfigurableScheduler composables in v15.0.0 (release). Affected options interfaces extend or intersect ConfigurableScheduler (dist/index.d.ts:212-217): useCountdown, useNow, useTimestamp, useTimeAgo, useTimeAgoIntl, useTemporalNow, useElementByPoint, useMemory, useVibrate, and useWebSocket's heartbeat option. scheduler is (cb: Fn) => Pausable, so useRafFn plugs in directly.
  3. useThrottleFn now fires trailing calls by default (trailing default changed false to true, v15.0.0 (release)). Pass trailing = false (3rd argument) to keep v14 behavior.
  4. useEventSource handles SSE message events and triggers both onmessage and addEventListener handlers (v15.0.0 (release)). Do not add manual duplicate listeners for unnamed events.
  5. deepRefs default flips next major. It defaults to true today with an explicit warning that the next major changes it to false (dist/index.d.ts:204-211). Pass deepRefs explicitly where the value matters.

Do not use (deprecated or replaced)

ExportReplacementEvidence
computedEagercomputed() (Vue 3.4+ no longer re-triggers on unchanged values)docs "will be removed in future version"
watchPausableVue 3.5 native watch() returns { stop, pause, resume }docs
executeTransitiontransition(source, from, to, options)deprecated at dist/index.d.ts:5114-5121
UseTransitionOptions.transitioneasing optionsame deprecation block
breakpointsVuetifybreakpointsVuetifyV2 or breakpointsVuetifyV3deprecated at dist/index.d.ts:758-762
asyncComputedcomputedAsync (alias remains, dist/index.d.ts:46)alias of computedAsync

Common tasks

import { useLocalStorage, useDark, useTitle, useThrottleFn } from '@vueuse/core'

// Reactive getter args enable derived values without computed()
const isDark = useDark()
const title = useTitle(() => isDark.value ? 'Night' : 'Day')

// Storage with schema evolution: mergeDefaults fills new keys
const settings = useLocalStorage('settings', { theme: 'light', density: 'comfortable' }, { mergeDefaults: true })

// v15 throttle fires a trailing call by default; 3rd arg is `trailing`
const onResize = useThrottleFn(handler, 200, false, true) // trailing=false, leading=true
import { useWebMCP } from '@vueuse/core'

// Register a WebMCP tool for browser agents (new in v15)
const { isSupported, isRegistered, error } = useWebMCP({
  name: 'get-current-user',
  description: 'Returns the signed-in user id',
  inputSchema: { type: 'object' },
  execute: () => ({ userId: user.value?.id ?? null }),
})

More patterns: best practices.

References

  • API surface: complete v15 export inventory, grouped.
  • Shared API: the @vueuse/shared functions re-exported by core.
  • Migration v14 to v15: every breaking change, feature, and notable fix since v14.3.0, cited.
  • New functions in v15: useWebMCP, useTemporalNow, useLiveAnnouncer, useElementOverflow usage.
  • Best practices: getters, event filters, storage serializers, schedulers, SSR, scoping.

Debugging notes (v15 fixes that may explain behavior changes)

  • useFetch ignores a stale success response after a newer request starts, and ignores stale abort errors after a refetch succeeds (v15, v14.4).
  • useWebSocket ignores messages from a superseded socket and syncs status to CLOSED after explicit close() (same releases).
  • useResizeObserver guards observe() with instanceof Element, so Vue comment nodes no longer crash it (v15).
  • Pointer handling: useDraggable and usePointerSwipe end on pointercancel, usePointer resets isInside, onLongPress clears pending presses (v15, v14.4).

Comments

Markdown supported