VueUse 10.0
A new release for VueUse is out. Version 10.0 features some new composables including reuse-template and some extra bug fixes and more. Read all about it in the Github changelog
Highlights
[createReusableTemplate](https://vueuse.org/core/createreusabletemplate/)
from https://github.com/antfu/vue-reuse-template[createTemplatePromise](https://vueuse.org/core/createTemplatePromise/)
from https://github.com/antfu/vue-template-promise[useAnimate](https://vueuse.org/core/useAnimate/)
for native animation API, thanks to @tolking- Renamed
resolveRef
totoRef
,resolveUnref
totoValue
, aligning with Vue 3.3: vuejs/core#7997 - Improved tree-shaking
- Cleaned up long-lasting PRs, thanks to all!
Breaking Changes
- Remove deprecated types - by @Alfred-Skyblue in #2656 (c2fee)
- Remove
isFunction
andisString
utils (cb644) - computedAsync:
- Set shallow defalut to true - by @xiankaiqun and @antfu in #2621 (23c9d)
- toRef:
- Rename
resolveRef
totoRef
(10e98)
- Rename
- types:
- Rename
MaybeComputedRef
toMaybeRefOrGetter
(4d757)
- Rename
- useAxios:
- useColorMode:
- Enable
disableTransition
by default (5c82c)
- Enable
- useElementVisibility:
- Use useIntersectionObserver instead of scroll event handler - by @curtgrimes in #2551 (74b00)
- useEventBus,createEventHook:
- Dedupe registration of the same function - by @Alfred-Skyblue in #2748 (dd514)
- useFullscreen:
- useIDBKeyval:
- Return format changed, add
isFinished
- by @jssullivan and james.sullivan in #2474 (ef281)
- Return format changed, add
- useInfiniteScroll:
- useSwipe:
- Use literal for swipe direction instead of enum (f285c)
- useToFixed:
- Remove deprecated function (a6e5b)
- useUserMedia:
- Add constraints - remove deviceIds - by @mango-martin in #2032 (8f2a3)
- Remove deprecated apis (85468)
- useWebNotification:
- Should be exposed as EventHooksOn - by @Alfred-Skyblue and @antfu in #2821 (bcd2a)
- useWindowSize:
Features
- Update deps (e75a5)
- Improve tree-shaking (3275e)
- createEventHook:
- createGlobalState:
- Allow passing initial args - by @jd-solanki and @antfu in #2790 (f21b2)
- createReusableTemplate:
- createTemplatePromise:
- onKeyStroke:
- reactiveOmit:
- Add predicate parameter - by @Alfred-Skyblue and @antfu in #2849 (2e297)
- reactivePick:
- Add predicate parameter - by @Alfred-Skyblue in #2850 (0bde4)
- toRef:
- Support two argument overrides from Vue (f307f)
- toValue:
- Rename
resolveUnref
totoValue
(0a72b)
- Rename
- useAnimate:
- useArrayDifference:
- New function - by @Alfred-Skyblue in #2710 (a2a33)
- useArrayIncludes:
- New function - by @Alfred-Skyblue and @antfu in #2708 (4d6bc)
- useArrayUnique:
- Add a custom function to deduplicate - by @Alfred-Skyblue in #2612 (c8c30)
- useAsyncValidator:
- useAxios:
- Added
onFinish
callback - by @Alfred-Skyblue in #2829 (a2f33) - Added
initialData
andresetOnExecute
options - by @Alfred-Skyblue and @antfu in #2791 (f54a3)
- Added
- useBreakpoints:
- Getting current breakpoints - by @ineshbose and @antfu in #2906 (bbabd)
- useBrowserLocation:
- useColorMode:
- useCssVar:
- Introduce
observe
option - by @Alfred-Skyblue in #2800 (ae6e1)
- Introduce
- useCycleList:
- useDark:
- Passthrough default handler from
useColorSchema
- by @godismyjudge95 and @antfu in #2866 (d6d35)
- Passthrough default handler from
- useDark, useColorMode:
- Introduce
disableTransition
option (320ab)
- Introduce
- useDraggable:
- useFetch:
- useFileDialog:
- Add listener for file change events - by @Alfred-Skyblue in #2893 (5e697)
- useFirestore:
- useIdle:
- useIntersectionObserver:
- useMouse:
- Support
type: screen
- by @francoislevesque in #2467 (39d18)
- Support
- useParentElement:
- New function - by @jd-solanki and @antfu in #2855 (e8168)
- usePerformanceObserver:
- New function - by @LockingReal, Admin and @okxiaoliang4 in #2736 (21536)
- useResizeObserver:
- useRouteQuery,useRouteParams:
- useSortable:
- New function - by @Alfred-Skyblue, @okxiaoliang4 and @antfu in #2763 (6bc60)
- useSupported:
- useSwipe, usePointerSwipe, useTransition:
- Improve tree-shaking - by @webistomin and @antfu in #2863 (08c21)
- useTextareaAutosize:
- Added
styleTarget
option to style other element - by @jd-solanki in #2312 (a3e95)
- Added
- useTransition:
- Expose transition utility for manual control - by @scottbedard in #2743 (526d5)
- Support
MaybeComputedRef
- by @zhiyuanzmj in #2871 (5944e)
- useVModel:
- Add
shouldEmit
hook - by @baiwusanyu-c and @antfu in #2836 (f8a53)
- Add
- watch:
- Shorthands for watch - by @mrhammadasif in #2651 (b4ec7)
Bug Fixes
- Use ts-ignore instead of ts-expect-error for version-specifc errors - by @sodatea in #2802 (37ec7)
- Upgrade vue-demi (976d8)
- onStartTyping: Fix char ascii - by @meenie-net in #2932 (e9ab3)
- toRef: Improve types overload, close #2925 - by @antfu in #2925 (cb6f9)
- useArrayDifference: Error with falsey - by @simpleoo0o and lix in #2869 (41858)
- useAsyncState: Fix toThrowError error type - by @Alfred-Skyblue in #2898 (b636f)
- useAsyncValidator: Incorrect condition for choosing constructor - by @theruziev in #2788 (93b45)
- useDevicesList: Show devices for Firefox - by @felixzapata in #2798 (0823d)
- useElementHover:
window
is not defined - by @okxiaoliang4 in #2793 (c86f2) - useFetch: Abort before updating state - by @Alfred-Skyblue in #2805 (fff45)
- useFullscreen: Handle Safari iOS - by @ferferga and @antfu in #2822 (9d394)
- useMounted: Check for the current instance (1aab1)
- useScroll: Add support for row-reverse and column-reverse - by @OneLoneFox and @antfu in #2577 (23b9a)
- useSortable: Order of dom and array is different - by @Alfred-Skyblue in #2926 (3a508)
- watchDeep,watchImmediate: Fix callback function execution logic - by @Alfred-Skyblue in #2951 (e6e25)
Performance
- useStorageAsync,useFetch: Replace setTimeout with Promise - by @Alfred-Skyblue in #2917 (8bd63)