Skip to content

v9.0.0
Compare
Choose a tag to compare
@github-actions github-actions released this 26 Jul 03:51
· 887 commits to main since this release
v9.0.0
86358ff

   🚨 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'

    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`)

    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`

  • math: New @vueuse/math package

  • New Array-related utilities

  • 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

Contributors

FrankFang, hanpei, and 13 other contributors
Assets 2