vueuse/vueuse v9.0.0-beta.0

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'

  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 preseve the reactive
  
  // with 9.0
  const title = $('foo')
  useTitle(() => title) // you can use a getter function just like `watch`

• 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