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 to toRef, resolveUnref to toValue, 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 and isString utils (cb644)
• computedAsync:
  • Set shallow defalut to true - by @xiankaiqun and @antfu in #2621 (23c9d)
• toRef:
  • Rename resolveRef to toRef (10e98)
• types:
  • Rename MaybeComputedRef to MaybeRefOrGetter (4d757)
• useAxios:
  • error should return type unknown - by @jbaubree and @antfu in #2807 (d8d73)
  • Remove deprecated apis (1f8b9)
  • Reject promise on execute - by @FRSgit and @antfu in #2485 (edece)
• useColorMode:
  • Enable disableTransition by default (5c82c)
• 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:
  • Better cross-platform compatibility - by @ferferga and @antfu in #2915 (2e467)
• useIDBKeyval:
  • Return format changed, add isFinished - by @jssullivan and james.sullivan in #2474 (ef281)
• useInfiniteScroll:
  • Improve loading strategies, close #1701, close #1685 - by @antfu in #1701 and #1685 (d3a2b)
• 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:
  • Use media query instead of orientationchange listener - by @zhousg and @antfu in #2919 (4e7b0)

Features

• Update deps (e75a5)
• Improve tree-shaking (3275e)
• createEventHook:
  • Allow awaiting on trigger - by @Akryum and @antfu in #2824 (31347)
• createGlobalState:
  • Allow passing initial args - by @jd-solanki and @antfu in #2790 (f21b2)
• createReusableTemplate:
  • New function - by @antfu in #2961 (bd53c)
• createTemplatePromise:
  • New function - by @antfu and Enzo Innocenzi in #2957 (13169)
• onKeyStroke:
  • Support ignoring repeated stroke - by @vaakian in #2652 (22ca5)
• 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 to toValue (0a72b)
• useAnimate:
  • New function - by @tolking and @antfu in #2109 (bcf5d)
• 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:
  • Add immediate and execute - by @jaw52 and @antfu in #2899 (79176)
  • Add manual option - by @jaw52 and @antfu in #2903 (16461)
• useAxios:
  • Added onFinish callback - by @Alfred-Skyblue in #2829 (a2f33)
  • Added initialData and resetOnExecute options - by @Alfred-Skyblue and @antfu in #2791 (f54a3)
• useBreakpoints:
  • Getting current breakpoints - by @ineshbose and @antfu in #2906 (bbabd)
• useBrowserLocation:
  • Two-way binding - by @sxzz in #2168 (a860c)
• useColorMode:
  • Support passing element as selector - by @Wing-9527 and @antfu in #2760 (02ccc)
  • Expose system and store ref, close #2023 - by @antfu in #2023 (d150c)
• useCssVar:
  • Introduce observe option - by @Alfred-Skyblue in #2800 (ae6e1)
• useCycleList:
  • Allow receiving reactive list - by @hjJunior and @antfu in #2864 (b65c2)
• useDark:
  • Passthrough default handler from useColorSchema - by @godismyjudge95 and @antfu in #2866 (d6d35)
• useDark, useColorMode:
  • Introduce disableTransition option (320ab)
• useDraggable:
  • Introduce axis option - by @Alfred-Skyblue and @antfu in #2948 (0842a)
  • Support capture option - by @faga295 and @antfu in #2725 (3996d)
• useFetch:
  • Update data on success - by @pbrzosko and Przemyslaw Brzosko in #2711 (78cfb)
• useFileDialog:
  • Add listener for file change events - by @Alfred-Skyblue in #2893 (5e697)
• useFirestore:
  • Support delay for autoDispose, fixes #2252 - by @Zehir in #2276 and #2252 (05781)
• useIdle:
  • Add reset capability - by @nahvego and @antfu in #2880 (f4d35)
• useIntersectionObserver:
  • Support for Pausable interface - by @Mini-ghost and @antfu in #2883 (4b336)
  • Allow multiple targets - by @ferferga and @antfu in #2964 (f87f8)
• useMouse:
  • Support type: screen - by @francoislevesque in #2467 (39d18)
• useParentElement:
  • New function - by @jd-solanki and @antfu in #2855 (e8168)
• usePerformanceObserver:
  • New function - by @LockingReal, Admin and @okxiaoliang4 in #2736 (21536)
• useResizeObserver:
  • Support element list - by @acyza and @antfu in #2841 (3e187)
• useRouteQuery,useRouteParams:
  • New transform handler - by @edumudu and @antfu in #2191 (d23ca)
• useSortable:
  • New function - by @Alfred-Skyblue, @okxiaoliang4 and @antfu in #2763 (6bc60)
• useSupported:
  • Support tracking reactivity for the callback function - by @ferferga and @antfu in #2904 (55a32)
• 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)
• 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)
• 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)