🚀 Features

• useArrayFindLast: New function  -  by @huynl-96 in #2471 (b0ac4)
• useAsyncState: Get a promise function parameter type declaration  -  by @Brain777777 in #2765 (b4c63)
• useAxios: Add success and error callbacks  -  by @Alfred-Skyblue in #2714 (809fc)
• useClamp: Composable computed usage improvements  -  by @ClemDee and @antfu in #2696 (08a07)
• useElementHover: Give hook delay properties  -  by @LockingReal and @antfu in #2741 (23283)
• useEventListener: Support reactive options  -  by @antfu (103d6)
• useFetch: Cancel previous request on refetch  -  by @Alfred-Skyblue and 丶远方 in #2750 (cd9d6)
• useInterval: Add reset function  -  by @mohammadhosry and Mohammad Agbareya in #2686 (81db6)
• useMutationObserver: Added test cases  -  by @Alfred-Skyblue in #2734 (192c8)
• useScroll: Support scrollend event  -  by @kongmoumou in #2716 (f8872)
• useSpeechSynthesis: Add stop function  -  by @zwkkwz1 in #2774 (820e2)

   🐞 Bug Fixes

• useAsyncValidator: Fix Schema importing from async-validator  -  by @theruziev and @okxiaoliang4 in #2761 (dbcdb)
• useAxios: Fix cancelToken  -  by @Alfred-Skyblue and 丶远方 in #2728 (7ad51)
• useDevicePixelRatio: Remove unnecessary cleanup  -  by @Waleed-KH and @antfu in #2325 (83feb)
• useFetch: Check if it's object for isFetchOptions  -  by @antfu (c2bc6)
• useFocus: Listen focus and blur to the targetElement  -  by @okxiaoliang4 in #2631 (7cd88)
• useInterval: Fix types  -  by @antfu (db66c)
• useScrollLock: Detect parent with overflow auto  -  by @dpschen in #2699 (7e590)
• useStorage: Emit a custom event to support custom storage areas  -  by @43081j and @okxiaoliang4 in #2630 (c6185)
• useStorageAsync: Handle mergeDefaults option  -  by @ModyQyW in #2773 (105f4)
• useThrottleFn: Check negative timeout  -  by @vaakian in #2620 (a7238)
• useWindowScroll: Use scrollX instead of pageXOffset  -  by @okxiaoliang4 in #2776 (e490a)

    View changes on GitHub

   🚀 Features

• usePrevious: New function  -  by @antfu (e101f)
• useRafFn, useIntervalFn, useTimeoutFn: Make status readonly  -  by @rotu in #2685 (39183)
• useWebSocket: Allow undefined ref for url  -  by @ferferga in #2473 (13924)

   🐞 Bug Fixes

• useElementSize: Use contentBoxSize as an array in useElementSize  -  by @threedayAAAAA and vaakian X in #2520 (30475)
• useElementSize: Fix incorrect element size on SVG  -  by @Lionad-Morotar, @wheatjs and @antfu in #2661 (902b3)
• useMediaControls: Ended status not updating  -  by @ferferga in #2680 (4ef27)
• useMouseInElement: Check if mouse out of window  -  by @chaii3 and @antfu in #2458 (54f4e)
• usePrecision: Fix return type  -  by @ClemDee in #2676 (e331b)
• useTimeoutFn: Respect callback parameters in start function  -  by @wvffle in #2693 (e054a)

    View changes on GitHub

   🚀 Features

• nuxt: Add metadata to auto import  -  by @antfu (eee12)

    View changes on GitHub

   🚀 Features

• computedAsync: Introduce shadow option  -  by @xiankaiqun in #2616 (a0656)
• createInjectionState: Return state when providing injection state  -  by @Tanimodori and lsdsjy in #2309 (f7ce6)
• reactivePick: Add test cases  -  by @Alfred-Skyblue, 丶远方 and @wheatjs in #2653 (b06b8)
• useAsyncState: Add test cases  -  by @Alfred-Skyblue and @wheatjs in #2657 (5907f)
• usePointerLock: New function  -  by @daniser, Sergey Danilchenko, Jelf and @wheatjs in #2590 (ae69f)
• useThrottleFn: Add test cases  -  by @Alfred-Skyblue in #2649 (85ab1)

   🐞 Bug Fixes

• Nuxt3 implementation  -  by @roiLeo in #2644 (8f6ce)
• components: Mark defineComponent as pure  -  by @vaakian and @wheatjs in #2623 (d5321)
• docs: Remove unnecessary import  -  by @yuyinws in #2611 (7a2ff)
• useAxios: Assign AxiosError to error.value when no url provided  -  by @syy11cn and @wheatjs in #2478 and #2484 (1e270)
• useDraggable: Write to useStorage  -  by @akifo in #2575 (e39c2)
• useElementByPoint: Make document configurable  -  by @vaakian in #2614 (c3639)
• useRouteQuery: Allow setting multiple route queries in same tick  -  by @wheatjs in #2646 (07c95)
• useVirtualList: List sometimes missing elements  -  by @begedin and @wheatjs in #2477 (25f6e)

    View changes on GitHub

   🚀 Features

• useActiveElement: Support shadow roots  -  by @43081j and @antfu in #2592 (07f20)
• useArrayUnique: New function  -  by @Alfred-Skyblue in #2597 (162cd)
• useDebounceFn,useThrottleFn: Return result using promise  -  by @vaakian in #2580 (4d305)
• useMouse: Support for movement detection  -  by @daniser and Sergey Danilchenko in #2589 (0c39d)
• useVirutalList: Expose scrollTo in component  -  by @Agapanthus and Eric Skaliks in #2397 (9f495)

   🐞 Bug Fixes

• nuxt: Disable useImage in the Nuxt package for auto imports  -  by @wheatjs in #2602 (d3d1d)
• onKeyStroke: Make target ref nullable  -  by @vaakian in #2579 (28614)
• useActiveElement: Ignore if relatedTarget is set  -  by @dpschen in #2600 (ae78d)
• useElementBounding: Update on scroll  -  by @Ducz01 and sibbng in #2596 (268a6)
• useScrollLock: Fix iOS touchmove bug  -  by @robinscholz, Robin Scholz, webfansplz and @antfu in #2362 (c9a9a)

    View changes on GitHub

   🚀 Features

• useAsyncState: Add onSuccess callbacks  -  by @Alfred-Skyblue in #2562 (ed64f)

   🐞 Bug Fixes

• formatTimeAgo: Typo foramtTimeAgo -> formatTimeAgo  -  by @QGIsK in #2568 (bb0fd)
• useFetch: Doesn't work with formData payload  -  by @abitwhy in #2440 (000fd)

    View changes on GitHub

   🐞 Bug Fixes

• useStorage: Sync within page, close #1595  -  by @antfu in #1595 (800f7)

    View changes on GitHub

   🐞 Bug Fixes

• useStorage: Resume the watch after setting the value, fix loop updates  -  by @antfu (c3851)

    View changes on GitHub

   🚀 Features

• extendRef: Support 2.7, close #2340  -  by @antfu in #2340 (8c82e)
• onClickOutside: Allow selector strings for ignore list  -  by @sibbng and @antfu in #2439 (7b3db)
• useTimeAgo: Non-reactive version formatTimeAgo  -  by @antfu (9293c)

   🐞 Bug Fixes

• onClickOutside: Apply ignore list on keyboard clicks  -  by @sibbng in #2438 (12e21)
• useTimeAgo: Rounding unit fallback  -  by @antfu (f40a0)

    View changes on GitHub

   🚀 Features

• createEeventHook: Auto dispose  -  by @ARZarkesh and @antfu in #2518 (fdd4d)
• useBreakpoints: Add breakpoints for Master CSS  -  by @imsus in #2529 (30c5b)
• useRafFn: Add delta and timestamp  -  by @innocenzi in #2493 (692d0)
• useTimeAgo: Add floor and ceil value calculation  -  by @userquin and @antfu in #2543 (a7dc6)
• useTimeAgo: Custom units, number rounding  -  by @antfu (324de)

   🐞 Bug Fixes

• Reference  -  by @antfu (ea497)
• useActiveElement: Ignore blur for relatedTarget  -  by @dpschen in #2540 (88b44)
• useDraggable: Use clientX instead of pageX, close #2053  -  by @stefnotch in #2054 and #2053 (c9186)
• useGeolocation: Implement immediate option  -  by @ebisbe in #2472 (161fd)
• useIntervalFn: Watch computed refs instead of just refs  -  by @innocenzi in #2539 (8bb7b)
• useMagicKeys: Also clear 'current' on @focus  -  by @hartmut (@blur)
• useStyleTag: Allow multiline CSS  -  by @jameswragg in #2476 (cfcc2)
• useTextareaAutosize: Support changes of element width  -  by @dpschen in #2541 (ebd48)
• useTimeAgo: Add showSecond prop to component  -  by @CS-Birb in #2547 (0c333)
• useWindowScroll: Use configured window onScroll  -  by @94726 in #2545 (5df0a)

    View changes on GitHub

   🐞 Bug Fixes

• onClickOutside: Call handler if click event is fired by a keypress  -  by @sibbng in #2426 (ff96d)
• ssr-plugin: Use useHead instead of useMeta  -  by @daniil4udo in #2449 (01c28)
• useFirestore: Fix falsy type error  -  by @kiyopikko in #2431 (6886e)
• useIDBKeyval: Incorrect value init set  -  by @sun0day in #2416 (1d841)
• useStyleTag: Allow use of existing node  -  by @jameswragg in #2442 (94413)
• useTransition: Call pause() to stop useRafFn when disabling  -  by @huodoushigemi, 李众豪 and @antfu in #2360 (0a49e)

    View changes on GitHub

   🚀 Features

• onClickOutside: Support options in component  -  by @fiadone and @sibbng in #2391
• useEventListener: Accept multiple events or listeners  -  by @vaakian and @antfu in #2180
• useFetch: Allow configure lifecycle handler behavior  -  by @climba03003 in #2333
• useFetch: Support sending the custom request to an absolute URL regardless baseURL  -  by @sun0day in #2210
• useGeolocation: Pause and resume controls  -  by @benax-se in #2376
• useIDBKeyval: New integration - Idb-keyval wrapper  -  by @Harmony222 in #2335
• useWebsocket: Url to be ref/computed  -  by @rotu in #2367

   🐞 Bug Fixes

• onClickOutside: Access correct document  -  by @sibbng in #2404
• usePointerSwipe: Handle secondary clicks properly  -  by @curtgrimes in #2379
• useScroll: The expected result cannot be returned after setting the throttle parameter  -  by @LittleSound in #2390
• useWebSocket: Don't hide pong setTimeout reference  -  by @kellerza and @antfu in #2206

    View changes on GitHub

   🚀 Features

• refDebounced: Use MaybeComputedRef for ms  -  by @dominikklein in #2337
• useClipboard: Support legacy copy  -  by @lumdzeehol in #2336
• useVirtualList: Horizontal list  -  by @Surof1n in #2310
• useWebWorker: Support overloads  -  by @GODLiangCY in #2259

   🐞 Bug Fixes

• useCounter: Set and reset should also be limited  -  by @iChengbo in #2179
• useRouteHash, useRouteParams, useRouteQuery: Override only selected route param  -  by @dvh91 in #2350
• useWebSocket: Don't reconnect WebSocket if close issued between retries  -  by @rotu in #2330
• watchThrottled: Wait incorrect remaining time  -  by @sun0day in #2267

    View changes on GitHub

   🚀 Features

• fromEvent: Support HTMLElement  -  by @rorry121 and @antfu in #2048
• useAxios: Add R genericity type for custom response data  -  by @jahnli in #2304
• useFocusTrap: Enable options in component  -  by @azaleta in #2321
• useSorted: New function  -  by @okxiaoliang4 in #1799

   🐞 Bug Fixes

• nuxt: Wrap ssr plugin in defineNuxtPlugin  -  by @dan-online in #2326
• useBluetooth: Use shallowRef for bluetooth instance  -  by @antfu (0199b)
• useFetch: Fix incorrect chainCallbacks behavior  -  by @GODLiangCY in #2231
• useFirestore: Auto dispose documents  -  by @Zehir in #2318
• useStorage: Fixed data desynchronization in case of clearing storage  -  by @yuryrudey in #2221
• useTitle: Prevent observe and titleTemplate been specified at the same time  -  by @huynl-96 and @antfu in #2049

    View changes on GitHub

   🚀 Features

• Optional callback for useInterval, useTimeout & useTimestamp  -  by @Waleed-KH in #2240
• onClickOutside: Add bubble modifier to directive  -  by @sibbng in #2183
• onKeyStroke: Support capture all handler  -  by @azaleta in #2197
• useAxios: Improve type  -  by @azaleta in #2208
• useAxios: Add second generic type to error  -  by @azaleta in #2248
• useAxios: Add option for choosing shallowRef or ref  -  by @jahnli in #2251
• useDateFormat: Support MMM and MMMM formatter  -  by @777Vasya77 in #2234
• useDateFormat: Support meridiem format  -  by @huynl-96 in #2011
• useFirestore: Support dependent queries  -  by @kiyopikko in #2103
• useMediaQuery: Allow query to be a ref  -  by @GODLiangCY in #2178
• useScroll: Support setting scroll position and toggling smooth scrolling  -  by @curtgrimes in #1996
• useTimeAgo: New showSecond option  -  by @azaleta in #2209

   🐞 Bug Fixes

• onClickOutside: Put ignore logic on pointerdown event  -  by @GODLiangCY in #2198
• templateRef: Add Component type  -  by @Holi0317 in #2203
• until: .not returns new instance  -  by @lsdsjy and @antfu in #2224

    View changes on GitHub

   🚨 Breaking Changes

• Bump Nuxt support to RC.9, update autoImports:sources hook  -  by @DamianGlowala in #2166

   🚀 Features

• useAxios: Support RequestConfig for execute  -  by @azaleta in #2152
• useBreakpoints: Support greaterOrEqual etc.  -  by @azaleta in #2148
• useCloned: New function  -  by @chaii3 and @antfu in #2045
• useDraggable: Support customizing trigger element  -  by @imguolao in #2133
• useElementSize: Support box sizing  -  by @vaakian and @antfu in #2143
• useElementVisibility: Support watch the real element  -  by @sxzz in #2169
• useUrlSearchParams: Add write option  -  by @waldonUB in #2165
• useVModel: Support clone option  -  by @edumudu and @antfu in #2022
• useWebSocket: Enhence heartbeat  -  by @azaleta in #2170
• useWindowSize: Support includeScrollbar  -  by @vaakian in #2161

   🐞 Bug Fixes

• useArrayMap: Allow return type matches the mapper function  -  by @GODLiangCY in #2172
• useAxios: Reset error on execute  -  by @flyingTodream in #2095
• useDevicePixelRatio: More efficient mechanism  -  by @Waleed-KH and @antfu in #2044
• useFavicon: Improve type overload  -  by @azaleta in #2123
• useFileDialog: Choose file not work on mobile  -  by @1SZX1 and @antfu in #2080
• useFocusWithin: Change focused typing to ComputedRef  -  by @chaii3 in #2073
• useMemoize: Allow number in getKey  -  by @chaii3 in #2074

    View changes on GitHub

   🚀 Features

• usePreferredContrast: New function  -  by @Zhaocl1997 in #2040

   🐞 Bug Fixes

• firebase: Improve externalization  -  by @antfu (e2a78)
• shared: Resolve internal circular reference  -  by @antfu (0fdbb)
• useActiveElement: Use computedWithControl instead of counter ref  -  by @vaakian in #2093
• useElementHover: Support set el ref type  -  by @JiatLn in #2079
• useScroll: Account for rounding errors when calculating arrivedState  -  by @curtgrimes in #2051
• useURLSearchParams: Avoid referencing to global location  -  by @mskr in #2066

    View changes on GitHub

   🚀 Features

• useCycleList: Support MaybeRef for initialValue  -  by @Waleed-KH in #2025
• usePrecision: New function  -  by @antfu (49c8a)
• usePreferredReducedMotion: New function  -  by @Zhaocl1997 in #2039
• useToNumber: New function  -  by @antfu (f69a3)
• useToString: New function  -  by @antfu (2b869)

   🐞 Bug Fixes

• Improve MaybeComputedRef  -  by @antfu (28c5a)
• useFavicon: Writable return type  -  by @chaii3 and @antfu in #2036
• useOffsetPagination: Min value for pageCount should be 1  -  by @jd-solanki and @antfu in #2001
• useScriptTag: Normalize src arg  -  by @huynl-96 in #2030
• useToFixed: Deprecated in favor of usePrecision  -  by @antfu (790ef)
• useTransition: Improve type of TransitionPresets  -  by @antfu (cc865)

    View changes on GitHub

   🐞 Bug Fixes

• nuxt: Disable auto import for integrations  -  by @antfu (0a43b)

    View changes on GitHub

   🚀 Features

• useDateFormat: Support dd, ddd and dddd formatter  -  by @aki77 in #1986
• useFirestore: Support reactive query  -  by @kiyopikko in #2008
• useToFixed: New function  -  by @FliPPeDround in #2003

   🐞 Bug Fixes

• useColorMode: When emitAuto is true, onChanged does not trigger when preferredMode changed  -  by @Waleed-KH in #2004
• useFetch: Broken callbacks when RequestInit and UseFetchOptions are both passed in  -  by @curtgrimes in #2013

    View changes on GitHub

   🚨 Breaking Changes

• all: isSupported becomes Ref<boolean> instead of boolean for SSR compatibility  -  by @okxiaoliang4 in #1800
• all: Rename function options type with consistant Use prefix, huge thanks to @okxiaoliang4! (this should not affect most of the usage case, unless you are importing those types directly)
  • All Changes

    • useSpeechSynthesis: Rename type Status to UseSpeechSynthesisStatus  -  by @antfu (db61f)
    • onKeyStroke: Rename type KeyStrokeOptions to OnKeyStrokeOptions  -  by @okxiaoliang4 in #1807
    • useAsyncState: Rename type AsyncStateOptions to UseAsyncStateOptions  -  by @okxiaoliang4 in #1809
    • useClipboard: Rename type ClipboardOptions to UseClipboardOptions and ClipboardReturn to UseClipboardReturn  -  by @okxiaoliang4 in #1861
    • useElementVisibility: Rename type VisibilityScrollTargetOptions to UseElementVisibilityOptions  -  by @okxiaoliang4 in #1863
    • useEventSource: Return type should be UseEventSourceReturn  -  by @okxiaoliang4 in #1864
    • useFavicon: Rename type FaviconOptions to UseFaviconOptions  -  by @okxiaoliang4 in #1865
    • useFocusWithin: Rename type FocusWithinReturn to UseFocusWithinReturn  -  by @okxiaoliang4 in #1866
    • useGeolocation: Rename type GeolocationOptions to UseGeolocationOptions  -  by @okxiaoliang4 in #1868
    • useIdle: Rename type IdleOptions to UseIdleOptions  -  by @okxiaoliang4 in #1869
    • useIntersectionObserver: Rename type IntersectionObserverOptions to UseIntersectionObserverOptions  -  by @okxiaoliang4 in #1870
    • useJwt: Rename type JwtOptions to UseJwtOptions and JwtResult to UseJwtReturn  -  by @okxiaoliang4 in #1899
    • useKeyModifier: Rename type ModifierOptions to UseModifierOptions  -  by @okxiaoliang4 in #1871
    • useMagicKeys: Rename type MagicKeys to UseMagicKeysReturn  -  by @okxiaoliang4 in #1873
    • useMemoize: Rename type UseMemoizedFn to UseMemoizeReturn and new type UseMemoizeOptions  -  by @okxiaoliang4 in #1872
    • useMemory: Rename type MemoryOptions to UseMemoryOptions  -  by @okxiaoliang4 in #1605
    • useMouse: Rename type MouseOptions to UseMouseOptions  -  by @okxiaoliang4 in #1877
    • useMutationObserver: Rename type MutationObserverOptions to UseMutationObserverOptions  -  by @okxiaoliang4 in #1884
    • useParallax: Rename type ParallaxOptions to UseParallaxOptions and ParallaxReturn to UseParallaxReturn  -  by @okxiaoliang4 in #1885
    • usePointerSwipe: Rename type PointerSwipeOptions to UsePointerSwipeOptions and PointerSwipeReturn to UsePointerSwipeReturn  -  by @okxiaoliang4 in #1886
    • useRTDB: Rename type RTDBOptions to UseRTDBOptions  -  by @okxiaoliang4 in #1901
    • useRafFn: Rename type RafFnOptions to UseRafFnOptions  -  by @okxiaoliang4 in #1887
    • useResizeObserver: Rename type ResizeObserverOptions to UseResizeObserverOptions  -  by @okxiaoliang4 in #1862
    • useShare: Rename type ShareOptions to UseShareOptions  -  by @okxiaoliang4 in #1888
    • useSpeechRecognition: Rename type SpeechRecognitionOptions to UseSpeechRecognitionOptions  -  by @okxiaoliang4 in #1889
    • useSpeechSynthesis: Rename type SpeechSynthesisOptions to UseSpeechSynthesisOptions  -  by @okxiaoliang4 in #1890
    • useSpeechSynthesis: Remove voiceInfo, allow voice as ref  -  by @sibbng in #1882
    • useStorage: Rename type StorageOptions to UseStorageOptions  -  by @okxiaoliang4 in #1867
    • useStorageAsync: Rename type StorageAsyncOptions to UseStorageAsyncOptions  -  by @okxiaoliang4 in #1883
    • useSwipe: Rename type SwipeOptions to UseSwipeOptions and SwipeReturn to UseSwipeReturn  -  by @okxiaoliang4 in #1891
    • useTimestamp: Rename type TimestampOptions to UseTimestampOptions  -  by @okxiaoliang4 in #1892
    • useTransition: Rename type TransitionOptions to UseTransitionOptions  -  by @okxiaoliang4 in #1893
    • useVModel: Rename type VModelOptions to UseVModelOptions  -  by @okxiaoliang4 in #1894
    • useWebSocket: Rename type WebSocketOptions to UseWebSocketOptions and WebSocketResult to UseWebSocketReturn  -  by @okxiaoliang4 in #1895
    • useWebWorkerFn: Rename type WebWorkerOptions to UseWebWorkerOptions  -  by @okxiaoliang4 in #1896
    • useWindowSize: Rename type WindowSizeOptions to UseWindowSizeOptions  -  by @okxiaoliang4 in #1897
    • useInterval: Rename type IntervalOptions to UseIntervalOptions  -  by @okxiaoliang4 in #1945
    • useIntervalFn: Rename type IntervalFnOptions to UseIntervalFnOptions  -  by @okxiaoliang4 in #1943
    • useTimeoutFn,useTimeout: Rename type TimeoutOptions to UseTimeoutOptions and TimeoutFnOptions to UseTimeoutFnOptions  -  by @okxiaoliang4 in #1944
• firebase: Support firebase 9 modular  -  by @antfu (9c65f)
• math: Move logicAnd, logicOr, logicNot, useClamp to @vueuse/math  -  by @antfu in #1794, #1810
• reactify: Enable support for reactive getter by default  -  by @antfu in #1860
• useThrottleFn: trailing option should be false by default  -  by @webfansplz and @antfu in #1687
• useMagicKeys: Store key instead of keyCode in current  -  by @wvffle in #1506

   🚀 Features

• all: Support reactive getter as argument  -  in #1768
  This introduces a new convention of passing reactive getters as arguments. Previously, many of VueUse functions supported a convention to accept optional Ref as arguments (MaybeRef<T>) to make the reactivity connections. For example:

  // pass plain value
  const title = useTitle('foo') // changes title to 'foo'
  // pass a ref
  const myTitle = ref('foo')
  useTitle(myTitle) // changes title to 'foo'
  // reactive triggers the update
  myTitle.value = 'bar' // changes title to 'bar'

  Copy to clipboard
  
  Since v9.0, most of the VueUse function also accepts a getter function similar to computed or the watch source of watch to provide better flexibility.

  // before
  const title = computed(() => `${foo.value} | template`)
  useTitle(title)
  // with 9.0
  useTitle(() => `${foo.value} | template`)

  Copy to clipboard
  
  It also works great with Reactivity Transform.

  // before
  const title = $('foo')
  useTitle($$(title)) // you need to use $$() to preserve the reactive
  // with 9.0
  const title = $('foo')
  useTitle(() => title) // you can use a getter function just like `watch`

  Copy to clipboard
• math: New @vueuse/math package
  • useAbs: New function  -  by @LittleSound and @antfu in #1825
  • useCeil: New function  -  by @webfansplz in #1818
  • useFloor: New function  -  by @webfansplz in #1817
  • useMath: New function  -  by @antfu in #1935
  • useMax: New function  -  by @FrankFang and @antfu in #1829
  • useMin: New function  -  by @antfu in #1934
  • useRound: New function  -  by @webfansplz in #1820
  • useSum: New function  -  by @holazz in #1837
  • useTrunc: New function  -  by @hanpei and @antfu in #1838
  • useAverage: New function  -  by @colgin and @antfu in #1826
• New Array-related utilities
  • useArrayEvery: New function  -  by @huynl-96 in #1915
  • useArrayFilter: New function  -  by @huynl-96 in #1905
  • useArrayFind: New function  -  by @yjl9903 and @antfu in #1875
  • useArrayJoin: New function  -  by @huynl-96 in #1904
  • useArrayMap: New function  -  by @huynl-96 and @antfu in #1908
  • useArrayReduce: New function  -  by @yjl9903 and @antfu in #1919
  • useArraySome: New function  -  by @huynl-96 in #1916
  • useArrayFindIndex: New function  -  by @huynl-96 in #1973
• syncRef: Support custom transforms  -  by @chaii3 and @antfu in #1968
• useAsyncState: Add throwError option  -  by @TuiMao233 and @antfu in #1975
• useColorMode: New initialValue option  -  by @antfu (fcaf9)
• useStorage: mergeDefaults option  -  by @webfansplz and @antfu in #1957
• useTextDirection: New function  -  by @iChengbo and @antfu in #1678

   🐞 Bug Fixes

• nuxt: Support import submodules for @vueuse/integrations  -  by @antfu (18ba0)
• onClickOutside: Fix handler type  -  by @sibbng in #1961
• useOffsetPagination: Incorrectly currentPageSize value  -  by @webfansplz in #1949
• useSpeechSynthesis: Remove duplicated onend, fix demo  -  by @sibbng in #1941
• useWebSocket: Set initial status as CLOSED  -  by @chaii3 in #1960
• useNProgress: Improve SSR support  -  by @webfansplz in #1990

    View changes on GitHub

   🚨 Breaking Changes

• firebase: Support firebase 9  -  by @antfu (9c65f)

   🚀 Features

• syncRef: Support custom transforms  -  by @chaii3 and @antfu in #1968
• useArrayFindIndex: New function  -  by @huynl-96 in #1973
• useAsyncState: Add throwError option  -  by @TuiMao233 and @antfu in #1975
• useColorMode: New initialValue option  -  by @antfu (fcaf9)
• useStorage: mergeDefaults option  -  by @webfansplz and @antfu in #1957
• useTextDirection: New function  -  by @iChengbo and @antfu in #1678

    View changes on GitHub

   🚨 Breaking Changes

• useInterval: Rename type IntervalOptions to UseIntervalOptions  -  by @okxiaoliang4 in #1945
• useIntervalFn: Rename type IntervalFnOptions to UseIntervalFnOptions  -  by @okxiaoliang4 in #1943
• useTimeoutFn,useTimeout: Rename type TimeoutOptions to UseTimeoutOptions and TimeoutFnOptions to UseTimeoutFnOptions  -  by @okxiaoliang4 in #1944

   🐞 Bug Fixes

• nuxt: Support import submodules for @vueuse/integrations  -  by @antfu (18ba0)
• onClickOutside: Fix handler type  -  by @sibbng in #1961
• useOffsetPagination: Incorrectly currentPageSize value  -  by @webfansplz in #1949
• useSpeechSynthesis: Remove duplicated onend, fix demo  -  by @sibbng in #1941
• useWebSocket: Set initial status as CLOSED  -  by @chaii3 in #1960

    View changes on GitHub

   🚨 Breaking Changes

• all: isSupported becomes Ref<boolean> instead of boolean for SSR compatibility  -  by @okxiaoliang4 in #1800
• all: Rename function options type with consistant Use prefix, huge thanks to @okxiaoliang4! (this should not affect most of the usage case, unless you are importing those types directly)
  • All Changes

    • useSpeechSynthesis: Rename type Status to UseSpeechSynthesisStatus  -  by @antfu (db61f)
    • onKeyStroke: Rename type KeyStrokeOptions to OnKeyStrokeOptions  -  by @okxiaoliang4 in #1807
    • useAsyncState: Rename type AsyncStateOptions to UseAsyncStateOptions  -  by @okxiaoliang4 in #1809
    • useClipboard: Rename type ClipboardOptions to UseClipboardOptions and ClipboardReturn to UseClipboardReturn  -  by @okxiaoliang4 in #1861
    • useElementVisibility: Rename type VisibilityScrollTargetOptions to UseElementVisibilityOptions  -  by @okxiaoliang4 in #1863
    • useEventSource: Return type should be UseEventSourceReturn  -  by @okxiaoliang4 in #1864
    • useFavicon: Rename type FaviconOptions to UseFaviconOptions  -  by @okxiaoliang4 in #1865
    • useFocusWithin: Rename type FocusWithinReturn to UseFocusWithinReturn  -  by @okxiaoliang4 in #1866
    • useGeolocation: Rename type GeolocationOptions to UseGeolocationOptions  -  by @okxiaoliang4 in #1868
    • useIdle: Rename type IdleOptions to UseIdleOptions  -  by @okxiaoliang4 in #1869
    • useIntersectionObserver: Rename type IntersectionObserverOptions to UseIntersectionObserverOptions  -  by @okxiaoliang4 in #1870
    • useJwt: Rename type JwtOptions to UseJwtOptions and JwtResult to UseJwtReturn  -  by @okxiaoliang4 in #1899
    • useKeyModifier: Rename type ModifierOptions to UseModifierOptions  -  by @okxiaoliang4 in #1871
    • useMagicKeys: Rename type MagicKeys to UseMagicKeysReturn  -  by @okxiaoliang4 in #1873
    • useMemoize: Rename type UseMemoizedFn to UseMemoizeReturn and new type UseMemoizeOptions  -  by @okxiaoliang4 in #1872
    • useMemory: Rename type MemoryOptions to UseMemoryOptions  -  by @okxiaoliang4 in #1605
    • useMouse: Rename type MouseOptions to UseMouseOptions  -  by @okxiaoliang4 in #1877
    • useMutationObserver: Rename type MutationObserverOptions to UseMutationObserverOptions  -  by @okxiaoliang4 in #1884
    • useParallax: Rename type ParallaxOptions to UseParallaxOptions and ParallaxReturn to UseParallaxReturn  -  by @okxiaoliang4 in #1885
    • usePointerSwipe: Rename type PointerSwipeOptions to UsePointerSwipeOptions and PointerSwipeReturn to UsePointerSwipeReturn  -  by @okxiaoliang4 in #1886
    • useRTDB: Rename type RTDBOptions to UseRTDBOptions  -  by @okxiaoliang4 in #1901
    • useRafFn: Rename type RafFnOptions to UseRafFnOptions  -  by @okxiaoliang4 in #1887
    • useResizeObserver: Rename type ResizeObserverOptions to UseResizeObserverOptions  -  by @okxiaoliang4 in #1862
    • useShare: Rename type ShareOptions to UseShareOptions  -  by @okxiaoliang4 in #1888
    • useSpeechRecognition: Rename type SpeechRecognitionOptions to UseSpeechRecognitionOptions  -  by @okxiaoliang4 in #1889
    • useSpeechSynthesis: Rename type SpeechSynthesisOptions to UseSpeechSynthesisOptions  -  by @okxiaoliang4 in #1890
    • useSpeechSynthesis: Remove voiceInfo, allow voice as ref  -  by @sibbng in #1882
    • useStorage: Rename type StorageOptions to UseStorageOptions  -  by @okxiaoliang4 in #1867
    • useStorageAsync: Rename type StorageAsyncOptions to UseStorageAsyncOptions  -  by @okxiaoliang4 in #1883
    • useSwipe: Rename type SwipeOptions to UseSwipeOptions and SwipeReturn to UseSwipeReturn  -  by @okxiaoliang4 in #1891
    • useTimestamp: Rename type TimestampOptions to UseTimestampOptions  -  by @okxiaoliang4 in #1892
    • useTransition: Rename type TransitionOptions to UseTransitionOptions  -  by @okxiaoliang4 in #1893
    • useVModel: Rename type VModelOptions to UseVModelOptions  -  by @okxiaoliang4 in #1894
    • useWebSocket: Rename type WebSocketOptions to UseWebSocketOptions and WebSocketResult to UseWebSocketReturn  -  by @okxiaoliang4 in #1895
    • useWebWorkerFn: Rename type WebWorkerOptions to UseWebWorkerOptions  -  by @okxiaoliang4 in #1896
    • useWindowSize: Rename type WindowSizeOptions to UseWindowSizeOptions  -  by @okxiaoliang4 in #1897
• math: Move logicAnd, logicOr, logicNot, useClamp to @vueuse/math  -  by @antfu in #1794, #1810
• reactify: Enable support for reactive getter by default  -  by @antfu in #1860
• useThrottleFn: trailing option should be false by default  -  by @webfansplz and @antfu in #1687
• useMagicKeys: Store key instead of keyCode in current  -  by @wvffle in #1506

   🚀 Features

• all: Support reactive getter as argument  -  in #1768
  This introduces a new convention of passing reactive getters as arguments. Previously, many of VueUse functions supports a convention to accept optional Ref as arguments (MaybeRef<T>) to making the reactivity connections. For example:

  // pass plain value
  const title = useTitle('foo') // changes title to 'foo'
  // pass a ref
  const myTitle = ref('foo')
  useTitle(myTitle) // changes title to 'foo'
  // reactive triggers the update
  myTitle.value = 'bar' // changes title to 'bar'

  Copy to clipboard
  
  Since v9.0, most of the VueUse function also accepts a getter function similar to computed or the watch source of watch to provide better flexibility.

  // before
  const title = computed(() => `${foo.value} | template`)
  useTitle(title)
  // with 9.0
  useTitle(() => `${foo.value} | template`)

  Copy to clipboard
  
  It also works great with Reactivity Transform.

  // before
  const title = $('foo')
  useTitle($$(title)) // you need to use $$() to preseve the reactive
  // with 9.0
  const title = $('foo')
  useTitle(() => title) // you can use a getter function just like `watch`

  Copy to clipboard
• math: New @vueuse/math package
  • useAbs: New function  -  by @LittleSound and @antfu in #1825
  • useCeil: New function  -  by @webfansplz in #1818
  • useFloor: New function  -  by @webfansplz in #1817
  • useMath: New function  -  by @antfu in #1935
  • useMax: New function  -  by @FrankFang and @antfu in #1829
  • useMin: New function  -  by @antfu in #1934
  • useRound: New function  -  by @webfansplz in #1820
  • useSum: New function  -  by @holazz in #1837
  • useTrunc: New function  -  by @hanpei and @antfu in #1838
  • useAverage: New function  -  by @colgin and @antfu in #1826
• New Array related utilities
  • useArrayEvery: New function  -  by @huynl-96 in #1915
  • useArrayFilter: New function  -  by @huynl-96 in #1905
  • useArrayFind: New function  -  by @yjl9903 and @antfu in #1875
  • useArrayJoin: New function  -  by @huynl-96 in #1904
  • useArrayMap: New function  -  by @huynl-96 and @antfu in #1908
  • useArrayReduce: New function  -  by @yjl9903 and @antfu in #1919
  • useArraySome: New function  -  by @huynl-96 in #1916

    View changes on GitHub

   🐞 Bug Fixes

• useDropZone: Improve argument type  -  by @aki77 in #1933
• useFileDialog: Explict UseFileDialogReturn type  -  by @xiaoxiangmoe in #1927
• useInfiniteScroll: Add direction types  -  by @sand4rt in #1929

    View changes on GitHub

   🐞 Bug Fixes

• useStyleTag: Fix hydration mismatch issue  -  by @sibbng in #1918
• useVModel: Fix compact with 2.7, fix #1745  -  by @Staremang in #1898

    View changes on GitHub

   🚀 Features

• onClickOutside: Add detectIframe option  -  by @sibbng in #1795
• useVModel: Compact with 2.7, fix #1745  -  by @jiuran in #1798

   🐞 Bug Fixes

• useMagicKeys: Fix setting properties of undefined value  -  by @Matrixbirds in #1856

    View changes on GitHub

   🐞 Bug Fixes

• useFileDialog: SSR compatible, close #1788  -  by @antfu (58a45)
• useMagicKeys: Only clean up used keys, close #1793  -  by @antfu (3c85d)

    View changes on GitHub

   🚀 Features

• useFileDialog: New function  -  by @wobsoriano, @antfu and @okxiaoliang4 in #1218
• useObjectUrl: New function  -  by @michaelhue in #1763
• useRouteParams: New function  -  by @DevilTea and @antfu in #1173
• useStepper: New function  -  by @innocenzi and @antfu in #1754
• useTextareaAutosize: New function  -  by @innocenzi and @antfu in #1756
• watchArray: New function  -  by @w1ndy and @antfu in #1705

   🐞 Bug Fixes

• useColorMode: Resolve auto to preferred mode internally  -  by @dfreier in #1766
• useMagicKeys: Reset refs on target blur  -  by @lavolpecheprogramma and @antfu in #1755

    View changes on GitHub

   🚀 Features

• computedWithControl: Support manual triggering  -  by @antfu (01fca)

   🐞 Bug Fixes

• computedWithControl: trigger only work in Vue 3  -  by @antfu (a1077)
• useMediaQuery: Check if window.matchMedia is a function  -  by @dfreier in #1765

    View changes on GitHub

   🚀 Features

• onLongPress: Added modifiers  -  by @chaii3 in #1719
• resolveRef: New function  -  by @antfu in #1743
• useAxios: Awaitable execute method  -  by @FRSgit in #1723
• useBase64: Accept objects  -  by @chaii3 and @antfu in #1706
• useColorMode: Add option to return auto mode  -  by @dfreier and @antfu in #1627
• useWindowSize: Listen to the orientationchange event  -  by @okxiaoliang4 and @antfu in #1609
• watchTriggerable: Extending watch with a manual trigger  -  by @LittleSound in #1736

   🐞 Bug Fixes

• computedWithControl: Source type match vue.watch  -  by @kongmoumou in #1674
• reactivePick: Allow nested keys  -  by @antfu (80c16)
• types: reactiveOmit and reactivePick support array as second arg  -  by @Brain777777 in #1742
• useCssVar: Remove spaces at both ends  -  by @murongg in #1741
• useDrauu: Fix Eraser does not work  -  by @qinwencheng and @antfu in #1753
• useMediaQuery: Strict isSupported check  -  by @antfu (5a64c)

    View changes on GitHub

   🐞 Bug Fixes

• useBluetooth:
  • Add @types/web-bluetooth as dep, close #1704 by @antfu

    View changes on GitHub

   🚀 Features

• useAsyncValidator:
  • New options #1695
• useBluetooth:
  • New function #1694

   🐞 Bug Fixes

• unrefElement:
  • Revert #1657

   ❤️ Contributors

   Thanks to @antfu | @carlosgamezdev | @michealroberts | @okxiaoliang4

    View changes on GitHub

   🐞 Bug Fixes

• ci:
  • Release script 0d3c1f7a

   ❤️ Contributors

   Thanks to @antfu

    View changes on GitHub

No significant changes

   ❤️ Contributors

   Thanks to @antfu

    View changes on GitHub

No significant changes

   ❤️ Contributors

   Thanks to @antfu

    View changes on GitHub

   🚀 Features

• until:
  • Improved until types #1493
• useImage:
  • New function #1460

   🐞 Bug Fixes

• onClickOutside:
  • Avoid calling safari workaround on right click #1673
• unrefElement:
  • Don't return the Vue instance when $el is null/undefined #1657
• useFetch:
  • Ssr compactible for headersToObject 8f541b0a
• useIntervalFn:
  • Watch interval correctly #1676
• useMagicKeys:
  • getModifierState is not function error in Chrome #1654
• useScroll:
  • Compatibility for mobile #1663
• useUrlSearchParams:
  • Preserve history state when updating query #1661
• watch*:
  • Fix T type for WatchCallback #1692

   ❤️ Contributors

   Thanks to @antfu | @arcs- | @DrJume | @HannesOberreiter | @HassanZahirnia | @hsyq | @LeSuisse | @luciorubeens | @lvjiaxuan | @meteorlxy | @nhedger | @sibbng | @YunYouJun | @zojize

    View changes on GitHub

Bug Fixes

• nuxt: add useStorage to disabled composables (#1652) (1ed33ec)
• useDraggable: should pass the stopPropagation option for component (#1620) (5e3151d)
• useIntervalFn: unref interval (#1633) (29fc50c)

Features

• useAsyncValidator: new function (#1497) (f422638)
• useCssVar: support initialValue (#1619) (bbb8334)
• useDropZone: new function (#1610) (d64070e)
• useInfiniteScroll: new options (#1354) (5a1b932)

Bug Fixes

• shared: correct to ignore undefined (#1601) (0aecfe6)
• toRefs: keep class prototype, close #1530 (#1599) (356da7d)
• useAxios: normalize isCanceled flag (#1585) (b833957)
• useFetch: respect custom fetch option (#1603) (56eb358)
• useFetch: return PromiseLike after setting method (#1571) (9b28628)
• useFocus: focused should be false when element is undefined (#1580) (f0067ac)
• useMediaQuery: normalize isSupported flag (#1575) (0222d48)
• useUrlSearchParams: should return initialValue (#1583) (fe58f8a)
• useVModel: unified value (#1568) (70d8092)
• watchThrottled: duplicate callback invokation when leading and trailing edges coincide (#1593) (8ba3b9d)

Features

• watchDebounced: new maxWait option (#1579) (9c72a78)

Bug Fixes

• useScrollLock: lock on element instead of document (#1561) (847e12f)
• useScrollLock: stop listener properly (#1562) (f31de43)
• useVModel: defaultValue can work with null (#1565) (f4e882c)
• useVModel: return default value when it's nil only (#1567) (50d8a4c)

Bug Fixes

• useVModel: returning undefined on false values (#1557) (0f3ddca)

Bug Fixes

• computedAsync: keep evaluating true for concurrent changes (#1555) (23549c3)
• core: circular reference (#1553) (df9dd89)
• integrations: mark change-case as an optional peer dependacy (#1542) (aa6e593)
• onClickOutside: fallback to pointerup event if click event not propagate (#1522) (89c9e53)
• onLongPress: make directive work normal (#1550) (53ba3ba)
• useAsyncState: isLoading not reset (#1518) (a8fd617)
• useAxios: exception when args incorrect (#1534) (81f355d)
• useAxios: rename aborted to isAborted (#1519) (e2a9ac3)
• useElementBounding: call update on mounted (#626) (#1541) (dccd1f3)
• useMutationObserver: isSupported misjudge (#1540) (a4238a8)

Features

• rxjs: Correct useObservable type signature and provide means of creating a non-undefined Ref (#1551) (5f3d026)
• useCurrentElement: new function (e24db79)
• useNetwork: new onlineAt attribute (#1535) (4d5cf1c)
• useScreenOrientation: new function (#1526) (e8c057c)
• useToggle: new options (#1523) (7aaebb3)
• useVModel: add option to define defaultValue (#1537) (66e82ec)

Bug Fixes

• nuxt: transpile ssr plugin (dfcee11)

Features

• og:image for each route (c514265)

Bug Fixes

• refAutoReset: clear timeout on scope dispose (#1507) (8843f8f)
• useDraggable: update type (0ef8f8f)
• useFetch: merge default options (#1500) (f62bf35), closes #1495
• useRafFn: call cancelAnimationFrame on pause (#1502) (a21bd2b)
• useScriptTag: enable setting arbitrary attrs (#1511) (f8cd7a7)

Features

• nuxt: support nuxt3 rc (c6407e1)

Bug Fixes

• nuxt: disable useHead and useTitle (903a14c)
• useNProgress: allow partial options (#1487) (14ae0c9)
• useRouteQuery: unset route query on default value (#1490) (c1459ed)

Features

• useDateFormat: add format (#1491) (a9c800d)

Bug Fixes

• nuxt: use useHead and import from #app (#1481) (8febd8a)

Bug Fixes

• useStorage: fix Set serialize error (#1475) (9b23828)

Features

• useElementBounding: new options (de05a18)

Bug Fixes

• nuxt: disable auto import from [@vueuse](https://github.com/vueuse)/integrations (dfac157)

Bug Fixes

• useStorage: update on same tick (#1472) (711053d)

Features

• useStorage: support serializing Date (#1471) (f5f6a39)

Bug Fixes

• useAxios: reuse url when only AxiosRequestConfig is passed to execute (#1438) (788a7ff)
• useKeyModifier: getModifierState is not a function (#1441) (946f6bc)
• useMediaQuery: media query before mount (#1461) (7edd0c6)

Features

• usePermission: support more permissions (#1462) (8dfbe99)

Bug Fixes

• nuxt: deprioritize auto imports (13fde88)
• useMagicKeys: handle meta key in MacOS (#1312) (bde6b1f)
• useStorage: fix sync racing and shreding (#1459) (1ae321b)
• bump vue-demi (#1451) (87e7a8b)

Features

• createInjectionState: init createInjectionState (#1456) (d98c4d8)

Bug Fixes

• metadata: unexported note entry (2f8ca30)

Features

• useWebSocket: allow to pass predicate function to autoReconnect… (#1433) (e3de556)

Bug Fixes

• useStroage: synced timing (27d1ba2)

Bug Fixes

• useEventListener: support component target (#1408) (981c651)
• useStorage sync race condition, closes #808 (#1430) (1ee0ae0)
• onKeyStroke: make directive only registered once (#1410) (da440ab)
• unrefElement: improve types (#1409) (3e19431)
• useElementHover: make directive only registered once (#1412) (db4f7a2)
• useElementSize: make directive only registered once (#1414) (bc1bd48)
• useElementVisibility: directive should work fine (#1424) (be803af)
• useInfiniteScroll: make directive only registered once (#1413) (554a17e)
• useIntersectionObserver: make directive only registered once (#1411) (fb71532)
• useScroll: make directive only registered once (#1415) (efc6cc5)

Features

• onClickOutside: customizable phase (#1406) (c31b01e)
• useElementVisibility: directive support (#1377) (de14228)

Bug Fixes

• useFetch: make helper methods return PromiseLike<UseFetchReturn<T>> (#1402) (b9e8e8a)
• useMediaQuery: removeEventListener in guard target should be med… (#1401) (92cedd1)

Breaking Changes

• Deprecated usage of @vueuse/core/nuxt has been removed, use @vueuse/nuxt instead
• syncRef renamed to syncRefs (5ec1da1)
• biSyncRef renamed to syncRef, with configurable syncing direction (360833d)
• fix(useTextSelection)!: listen to selectionchange event by @okxiaoliang4 in #1194
• refactor(useFocus)!: made target an required argument instead of an option by @wtykirby in #1010

Bug Fixes

• useAxios: args param need limit (#1343) (42fc7a7)
• useFetch: uppercase HTTP methods in useFetch (#1336) (4ce7c72)
• useTextSelection: ssr compactible (2a87733)
• onClickOutside: should work normal w/ directive (#1366) (66cefd5)

New Features

• New @vueuse/metadata package to replace the indexes.json with proper types
• Better support of related functions in docs
• Support alias of functions
• New functions
  • useTimeoutPoll: new function (#1178) (abd59a2)
  • useDateFormat: new function (#1123) (5c445d8)
  • useGamepad: new function (#1355) (5071118)
  • useFileSystemAccess: new function (#1243) (28066cb)
  • integrations: add useChangeCase (#1371) (a98e569)
• Enhancements
  • useAxios: allow useAxios to be awaited (#1228) (8812e7e)
  • useAxios: allow not passing url in constructor (#1388) (2a582d4)
  • useDraggable: add stopPropagation option (#1391) (7445f0a)
• Directive support for functions
  • onKeyStroke: directive support (#1362) (9f8eabb)
  • useElementHover: directive support (#1359) (73b0def)
  • useInfiniteScroll: directive support (#1340) (fd8ca8e)
  • useIntersectionObserver: directive support (#1339) (53d4dfd)
  • useScroll: directive support (#1348) (0daf86f)
  • useScrollLock: directive support (#1360) (4356613)
  • useElementSize: directive support (#1365) (1346456)

Refactoring

• Normalize the function names with the backward compact alias
  • eagerComputed -> computedEager
  • asyncComputed -> computedAsync
  • controlledComputed -> computedWithControl
  • useThrottle, throttledRef -> refThrottled
  • useDebounce, debouncedRef -> refDebounced
  • controlledRef -> refWithControl
  • pasuableWatch -> watchPasuable
  • ignorableWatch -> watchIgnorable
  • debouncedWatch -> watchDebounced
  • throttledWatch -> watchThrottled
  • and, or, not -> logicAnd, logicOr, logicNot
  • autoResetRef -> refAutoReset

New Contributors

• @Glandos made their first contribution in #1336
• @WuLianN made their first contribution in #1343
• @hengshanMWC made their first contribution in #1363
• @Rolanddoda made their first contribution in #1380
• @Flamenco made their first contribution in #1384
• @dospunk made their first contribution in #1392

New Team Members

• @webfansplz
• @okxiaoliang4

Full Changelog: https://github.com/vueuse/vueuse/compare/v7.7.1...v8.0.0

Bug Fixes

• onClickOutside: should work normal w/ directive (#1366) (66cefd5)

Features

• integrations: add useChangeCase (#1371) (a98e569)
• useElementSize: directive support (#1365) (1346456)

Full changelog at https://github.com/vueuse/vueuse/releases/tag/v8.0.0-beta.1

Breaking Changes

• Deprecated usage of @vueuse/core/nuxt has been removed, use @vueuse/nuxt instead
• syncRef renamed to syncRefs (5ec1da1)
• biSyncRef renamed to syncRef, with configurable syncing direction (360833d)
• fix(useTextSelection)!: listen to selectionchange event by @okxiaoliang4 in #1194
• refactor(useFocus)!: made target an required argument instead of an option by @wtykirby in #1010

Bug Fixes

• useAxios: args param need limit (#1343) (42fc7a7)
• useFetch: uppercase HTTP methods in useFetch (#1336) (4ce7c72)
• useTextSelection: ssr compactible (2a87733)

New Features

• New @vueuse/metadata package to replace the indexes.json with proper types
• Better support of related functions in docs
• Support alias of functions
• New functions
  • useTimeoutPoll: new function (#1178) (abd59a2)
  • useDateFormat: new function (#1123) (5c445d8)
  • useGamepad: new function (#1355) (5071118)
• Enhancements
  • useAxios: allow useAxios to be awaited (#1228) (8812e7e)
• Directive support for functions
  • onKeyStroke: directive support (#1362) (9f8eabb)
  • useElementHover: directive support (#1359) (73b0def)
  • useInfiniteScroll: directive support (#1340) (fd8ca8e)
  • useIntersectionObserver: directive support (#1339) (53d4dfd)
  • useScroll: directive support (#1348) (0daf86f)
  • useScrollLock: directive support (#1360) (4356613)

Refactoring

• Normalize the function names with the backward compact alias
  • eagerComputed -> computedEager
  • asyncComputed -> computedAsync
  • controlledComputed -> computedWithControl
  • useThrottle, throttledRef -> refThrottled
  • useDebounce, debouncedRef -> refDebounced
  • controlledRef -> refWithControl
  • pasuableWatch -> watchPasuable
  • ignorableWatch -> watchIgnorable
  • debouncedWatch -> watchDebounced
  • throttledWatch -> watchThrottled
  • and, or, not -> logicAnd, logicOr, logicNot
  • autoResetRef -> refAutoReset

Bug Fixes

• useScrollLock: should work normal with initialState (#1257) (75146b8)
• use indirect type (#1337) (54a9ac0)
• useFetch: make error shallow (#1270) (53d1983)

Bug Fixes

• useCycleList: nullish check (#1280) (aef8a2b)
• useFetch: fix run afterFetch condition (#1271) (23b12a3)

Features

• reactiveComputed: new function (fcfec1c)
• reactiveOmit: add reactiveOmit (#1292) (3b5079c)
• useEventBus: payload support (#1279) (e4ceb92)
• useFullscreen: autoExit support (#1272) (c0b1ad0)
• useMouse: support eventFilter (#1261) (3927dd3)

Bug Fixes

• useElementBouding: should reset value while element unmounted (#1253) (aba020f)
• useElementSize: should reset value while element unmounted (#1254) (7b40091)
• useFps,useMemory: ssr support (#1244) (0e1e211)
• useMagicKeys: filter undefined event key (#1235) (03929c7)
• useToggle: toggle function return value (#1256) (8d190ae)

Features

• useCssVar: support prop be ref (#1236) (f99ea0d)
• useScriptTag: custom attrs support (#1229) (ef8684c)
• whenever: add type for callback param (#1246) (322cdcb)

Bug Fixes

• onLongPress: dir case (#1227) (768af79)

Bug Fixes

• integrations: relax peerDeps version, close #1189 (94411ad)
• ssr-handlers: fix _global is undefined (#1190) (5418f3b)
• UseDraggable: add prop keystorageType (#1191) (20df83c)
• useElementBounding: update jsdoc (e1f64dc)

Features

• onClickOutside: add ignore option (#1205) (c275a2e)
• onLongPress: new function (#1225) (eed2889)
• useCached: new function (#1169) (fb37135)
• useEagerComputed: allow specify watchOptions (#1192) (2473407)
• useFetch: support more http methods (#1149) (#1193) (01f8dfb)
• useInfiniteScroll: new function (#1219) (4f0ad36)
• useInterval: support ref as interval (#1215) (a2b2b0d)
• useOffsetPagination: new function (#1104) (b4b7e8e)

Bug Fixes

• globalThis, close #1187, close #1163, close #1175 (3c8cdde)
• useCycleList: operator precedence (#1176) (6d2cb26)
• watchOnce: watchOnce when called with immediate flag (#1180) (b61ceec)

Features

• useAxios: added option to control whether the request fires immediately (#1170) (467522d)
• useStyleTag: new function (#1154) (0a696d4)

Bug Fixes

• ssr-handlers: compatible with QQ browser (#1133) (7dac4f8)
• types: do not use ShallowRef, close #1151 (3c38434)
• useDraggable: onEnd() runs even if target wasn't dragged directly in exact mode (#1145) (4879255)
• useWebSocket: close WebSocket (#1137) (f6b5994)
• useWebWorkerFn: fix multiple dependencies handling (#1138) (e6968fb)

Bug Fixes

• nuxt: types (503b4ec)
• storage: caught DOMException accessing storage (#1124) (77fe0fb)
• useAsyncState: improve types (#1119) (247cc73)

Bug Fixes

• useBroadcastChannel: fix demo (90c2593)

Features

• nuxt: use nuxt kit (de1ccf9)

Bug Fixes

• stricter eslint rules (c6abd6f)

Bug Fixes

• fromEvent: set immediate for from (issue #1099) (#1100) (0af4450)
• useScriptTag: unload should remove script tag (#1114) (970fe23)

Features

• useAsyncState: add property isLoading (#1116) (f0b9618)
• useBroadcastChannel: new function (#1085) (1a565bd)
• useMemoize: new function (#1045) (9645f98)
• useVibrate: new function (#1082) (cdeb95a)
• useWebNotification: new function (#979) (bf9b039)

Bug Fixes

• nuxt: cookies as storage should not expire (762a043)

Features

• ssr handlers (#1060) (3aa4997)
• useTitle: added optional titleTemplate injection (357ac93)

Bug Fixes

• useWebSocket: close WebSocket gently (#1057) (f4bb901)
• add @vueuse/core and @vueuse/shared to Nuxt build.transpile (#1064) (dadbff7)
• useElementBounding: fix target is null or undefined (#1043) (d6d1daf)
• useRafFn: only runs on client, close #1044 (c63616b)

Features

• useColorMode: new function (#1051) (ae5bfb4)
• useCycleList: new function (#1052) (adcebf8)
• useFetch: allow useFetch to be awaited (#1056) (8ee7677)
• useNavigatorLanguage: new function (#1046) (63e13cb)
• useScroll: pass original scroll event to callbacks (#1023) (a44eb92)

Bug Fixes

• useScrollLock: set the overflow property on iOS device as well (#1033) (1cae15d)
• useWebSocket: close WebSocket gently (#1018) (4b296c7)

Features

• throttleFilter: leading fix (#1039) (496dbd9)
• useAsyncState: add option for choosing shallowRef or ref (#1040) (b995216)
• useElementByPoint: new function (#1022) (3edf763)
• useSafeArea: new function (#985) (3de76e1)
• useStorageAsync: new function (169b02b)
• useSubject: new function (#1012) (edc8cf6)
• useTextSelection: new function (#1038) (0b83b0f)

Bug Fixes

• nuxt: import path (050be70)

Bug Fixes

• nuxt: build (879756c)

Bug Fixes

• useWebSocket: close WebSocket gently (#995) (161c123)

Features

• new Nuxt package (#967) (a115cf6)
• rxjs: improve rxjs from (#987) (fbcbef6)
• useFocusWithin: new function (#997) (66a1605)
• useMediaControls: playbackRate control (#1002) (417f890)
• useMouse: mouse position based by option.type (#993) (819f449)
• useScroll: directions (#981) (88db283)

Bug Fixes

• useAsyncState: optional argument of execute (#972) (6661a09)
• UseVirtualList: fix list not being reactive in component (#968) (fb7cd78)

Features

• useEyeDropper: add initialValue option, improve types (#950) (cf8ced3)

Bug Fixes

• improve package.json (0c4e770)
• useMemory: import path (bd2346b)

Bug Fixes

• nuxt: add useCookie in disabled composables for Nuxt (#965) (4088dad)

Features

• useAsyncQueue: new function (#921) (4e40c6f)
• useClamp: new function (#953) (e6659b0)
• useLockScroll: new function (#958) (930890a)
• useMounted: new function (b6a36e0)

Bug Fixes

• nuxt: nuxt module mjs (8d38b6e)

Bug Fixes

• nuxt: provide mjs version for nuxt module (bf80643)
• useWindowSize: improve SSR (42ae437)

Features

• useMediaQuery: improve SSR (7b67da6)

Bug Fixes

• useBase64: improve SSR compatibility (6bc5f04)
• useEyeDropper: improve SSR compatibility (9b5f2c4)
• useFocuseTrap: types import path (8e0f424)

Features

• useDevicesList: add option (#943) (ea051e9)

BREAKING CHANGES

• refactor(onClickOutside)!: listen click event, remove event option (#817)
• fix(useGeolocation)!: latitude and longitude default to Infinity (#839)
• fix(useElementBounding)!: use getBoundingClientRect instead of contentRect (#870)
• fix(useClipboard)!: disable read by default (#941)

Bug Fixes

• useFocus: resolve issues when used with v-if (#927) (4755036)
• useWebWorker: explicit define return interface (#935) (d19a6a3)
• interface typos (#938) (8040940)

Features

• useCounter: add options (#928) (3c63842)
• useEventSource: add options (#939) (eda5d1e)
• useMemory: new function (#923) (8508d28)

Bug Fixes

• nuxt: opt-out vite optimization (2b11461)

Features

• createReactiveFn: new alias (6677e58)
• createUnrefFn: new function (#789) (083319c)
• debouncedRef: new alias (c5e0134)
• syncRef: support more watch source type (#918) (ca0ff73)
• throttledRef: new alias (52fcae7)
• useDraggable: add onEnd hook (#916) (07d4898)
• useEyeDropper: Reactive EyeDropper API (#911) (b65f705)
• useFocus: new function (#818) (355a945)
• useVirtualList: adding support for reactive lists (#904) (23356b2)

Bug Fixes

• toRefs: call set method on computed (#895) (0219f9d)

Features

• useBase64: new function (#879) (ef6b706)
• useBreakpoints: shortcuts (#905) (0bcf52a)
• useDebounce & useDebounceFn: accept maxMs parameter (#877) (529acc4)
• useFps: reactive fps (#898) (87d1741)

Bug Fixes

• esm compactiblity, close #847 (251e663)

Bug Fixes

• Could not resolve "@vueuse/shared" (#894) (d6beee8)
• useElementVisibility: prop 'as' does not work as expected (#889) (b58cce7)

Bug Fixes

• nuxt: do not register apis duplicately (732926c)
• exports useFetch return type (868ddb9)

Features

• useFetch: timeout (#869) (30e6901)
• useFuse: improve the demo (#857) (0d28ee4), closes #821

Bug Fixes

• nuxt module (3857b5d)

Bug Fixes

• useStorage: macro task for listening to storage change (c643549)

Features

• support Nuxt auto importing (399e5e9)
• controlledComputed: expose invalidate function (db7e607)
• useStorage: new writeDefaults option (bdce147)
• useStorage: support Map and Set (bc223d5)

Bug Fixes

• useStorage: macro task for listening to storage change (6206fd5)

Features

• controlledComputed: expose invalidate function (db7e607)
• useStorage: new writeDefaults option (39e3806)
• useStorage: support Map and Set (5239786)

Features

• UseFocusTrap: component (#820) (bdea8ea)

   🚨 Breaking Changes

• useElementVisibility: Use useIntersectionObserver instead of scroll event handler  -  by @curtgrimes in #2551 (74b00)

   🚀 Features

• 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)
• useArrayUnique: Add a custom function to deduplicate  -  by @Alfred-Skyblue in #2612 (c8c30)
• useAsyncValidator: Add manual option  -  by @jaw52 and @antfu in #2903 (16461)
• useAxios: Added onFinish callback  -  by @Alfred-Skyblue in #2829 (a2f33)
• useBreakpoints: Getting current breakpoints  -  by @ineshbose and @antfu in #2906 (bbabd)
• useDark: Passthrough default handler from useColorSchema  -  by @godismyjudge95 and @antfu in #2866 (d6d35)
• useParentElement: New function  -  by @jd-solanki and @antfu in #2855 (e8168)
• useResizeObserver: Support element list  -  by @acyza and @antfu in #2841 (3e187)
• useSupported: Support tracking reactivity for the callback function  -  by @ferferga and @antfu in #2904 (55a32)

   🐞 Bug Fixes

• useDevicesList: Show devices for Firefox  -  by @felixzapata in #2798 (0823d)

    View changes on GitHub

   🚀 Features

• useAsyncValidator: Add immediate and execute  -  by @jaw52 and @antfu in #2899 (79176)
• useFileDialog: Add listener for file change events  -  by @Alfred-Skyblue in #2893 (5e697)
• useIdle: Add reset capability  -  by @nahvego and @antfu in #2880 (f4d35)
• useTransition: Support MaybeComputedRef  -  by @zhiyuanzmj in #2871 (5944e)
• useVModel: Add shouldEmit hook  -  by @baiwusanyu-c and @antfu in #2836 (f8a53)

   🐞 Bug Fixes

• useArrayDifference: Error with falsey  -  by @simpleoo0o and lix in #2869 (41858)
• useAsyncState: Fix toThrowError error type  -  by @Alfred-Skyblue in #2898 (b636f)

    View changes on GitHub

   🚨 Breaking Changes

• Remove deprecated types  -  by @Alfred-Skyblue in #2656 (c2fee)
• computedAsync: Set shallow defalut to true  -  by @xiankaiqun and @antfu in #2621 (23c9d)
• useAxios: error should return type unknown  -  by @jbaubree and @antfu in #2807 (d8d73)
• useEventBus,createEventHook: Dedupe registration of the same function  -  by @Alfred-Skyblue in #2748 (dd514)
• useIDBKeyval: Return format changed, add isFinished  -  by @jssullivan and james.sullivan in #2474 (ef281)
• useSwipe: Use literal for swipe direction instead of enum  -  by @antfu (f285c)
• useUserMedia: Add constraints - remove deviceIds  -  by @mango-martin in #2032 (8f2a3)
• useWebNotification: Should be exposed as EventHooksOn  -  by @Alfred-Skyblue and @antfu in #2821 (bcd2a)

   🚀 Features

• 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)
• useArrayDifference: New function  -  by @Alfred-Skyblue in #2710 (a2a33)
• useArrayIncludes: New function  -  by @Alfred-Skyblue and @antfu in #2708 (4d6bc)
• useBrowserLocation: Two-way binding  -  by @sxzz in #2168 (a860c)
• useCssVar: Introduce observe option  -  by @Alfred-Skyblue in #2800 (ae6e1)
• useCycleList: Allow receiving reactive list  -  by @hjJunior and @antfu in #2864 (b65c2)
• useDark, useColorMode: Introduce disableTransition option  -  by @antfu (320ab)
• useFetch: Update data on success  -  by @pbrzosko and Przemyslaw Brzosko in #2711 (78cfb)
• usePerformanceObserver: New function  -  by @LockingReal, Admin and @okxiaoliang4 in #2736 (21536)
• useSortable: New function  -  by @Alfred-Skyblue, @okxiaoliang4 and @antfu in #2763 (6bc60)
• 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)
• 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)
• useAsyncValidator: Incorrect condition for choosing constructor  -  by @theruziev in #2788 (93b45)
• 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)

    View changes on GitHub