vueuse-shared-skilld
vueuse/vueuse @vueuse/shared@14.2.1
Tags: next: 5.0.0, alpha: 14.0.0-alpha.3, beta: 14.0.0-beta.1
References: Docs
API Changes
This section documents version-specific API changes — prioritize recent major/minor releases.
-
BREAKING: Requires Vue 3.5 — v14 now requires Vue 3.5+ for native performance optimizations source
-
BREAKING:
useThrottleFnalignment — v14 aligned with traditional throttle behavior (leading: true, trailing: false by default) source -
BREAKING: ESM-only — v13 dropped CJS build support, package is now ESM-only source
-
BREAKING:
createSharedComposablereturn — v14 now returns only the sharedComposable instance on the client side source -
NEW:
refManualReset— new function in v14 for creating refs with an explicitreset()method source -
NEW:
watchAtMostcontrols — v14 addedpause,resume, andcountto the return value source -
NEW:
tryOnScopeDispose— v14 added optionalfailSilentlyparameter to suppress errors outside of scope source -
NEW:
useArrayReducetype — v14.1.0 now exports theUseArrayReduceReturntype source -
NEW:
computedWithControlsources — v14.1.0 allows different types in watch sources array source -
DEPRECATED:
computedEager— v14 deprecated in favor of Vue 3.5's nativecomputedoptimizations source -
DEPRECATED:
watchPausable— v14 deprecated in favor of Vue's built-inwatchorpausableFiltersource -
DEPRECATED: Alias exports — v14 deprecated secondary names like
ignorableWatchin favor of primarywatchIgnorablesource -
DEPRECATED:
eagerComputed— v14 deprecated alias in favor ofcomputedEagersource -
DEPRECATED:
controlledComputed— v14 deprecated alias in favor ofcomputedWithControlsource
Also changed: createReactiveFn DEPRECATED · autoResetRef DEPRECATED · debouncedRef DEPRECATED · useDebounce DEPRECATED · throttledRef DEPRECATED · useThrottle DEPRECATED · controlledRef DEPRECATED · debouncedWatch DEPRECATED · ignorableWatch DEPRECATED · pausableWatch DEPRECATED · throttledWatch DEPRECATED
Best Practices
-
Prefer Vue 3.4+ built-in
computed()overcomputedEager()— standard computed properties now only trigger dependencies if the return value actually changes, making eager evaluation unnecessary source -
Use
createSharedComposable()for SSR-safe state sharing — it automatically falls back to non-shared instances during SSR to prevent cross-request state pollution, while maintaining a singleton on the client source -
Share state within the same component using
provideLocal()andinjectLocal()— allows accessing provided values without going through the parent/child boundary, now with full Vapor mode support source -
Replace manual watchers with
until()for one-time async conditions — provides a promise-based API for flow control that resolves once a ref meets a specific requirement, reducing callback nesting source
// Preferred for one-time triggers
await until(isReady).toBe(true)
doSomething()
-
Implement
refManualReset()for easy state restoration — provides a built-in.reset()method to return the ref to its initial value, ideal for clearing forms or reset-to-default filters source -
Use
reactify()to transform plain utility functions into reactive ones — automatically accepts refs as arguments and returns aComputedRef, enabling rapid development of reactive logic source -
Optimize hot paths with
refWithControl()usingpeek()andlay()— allows reading or writing a ref's value without triggering the reactivity system or tracking dependencies, minimizing unnecessary updates source -
Return dual object/array APIs via
makeDestructurable()— makes your custom composables more flexible by allowing users to choose between positional (array) or named (object) destructuring source -
Convert state during synchronization with
syncRef()custom transforms — use thetransformoption withltrandrtlfunctions to map values between refs of different types source
// Sync a number ref with a string ref
syncRef(count, stringCount, {
transform: {
ltr: left => String(left),
rtl: right => Number(right)
}
})
- Choose
createGlobalState()for persistent application-wide singletons — unlike shared composables which dispose state when subscribers reach zero, global state remains alive for the entire app lifecycle source
More from harlan-zw/vue-ecosystem-skills
pinia-colada-skilld
The smart data fetching layer for Vue.js. ALWAYS use when writing code importing \"@pinia/colada\". Consult for debugging, best practices, or modifying @pinia/colada, pinia/colada, pinia colada, pinia-colada.
128vue-router-skilld
ALWAYS use when writing code importing \"vue-router\". Consult for debugging, best practices, or modifying vue-router, vue router, router.
125vueuse-core-skilld
Collection of essential Vue Composition Utilities. ALWAYS use when writing code importing \"@vueuse/core\". Consult for debugging, best practices, or modifying @vueuse/core, vueuse/core, vueuse core, vueuse.
116vue-test-utils-skilld
ALWAYS use when writing code importing \"@vue/test-utils\". Consult for debugging, best practices, or modifying @vue/test-utils, vue/test-utils, vue test-utils, vue test utils, test-utils, test utils.
94vueuse-motion-skilld
Vue Composables putting your components in motion. ALWAYS use when writing code importing \"@vueuse/motion\". Consult for debugging, best practices, or modifying @vueuse/motion, vueuse/motion, vueuse motion, motion.
86vue-data-ui-skilld
A user-empowering data visualization Vue 3 components library for eloquent data storytelling. ALWAYS use when writing code importing \"vue-data-ui\". Consult for debugging, best practices, or modifying vue-data-ui, vue data ui.
65