Upgrading @vueuse/core 10 to 11
Breaking10.11.1 → 11.3.0Breaking4New25Changed4Fixed50
BreakingUpgrade verdict
4 breaking changes.
In plain terms
- Intersection observers created by useIntersectionObserver now trigger at threshold 0 by default instead of the previous value.
- The useChangeCase helper now uses a newer version of the change-case library, which may change its output.
- The useFuse helper now depends on a new major version of fuse.js, which may change search behavior.
- The useJwt helper now uses a new major version of jwt-decode, which may change how tokens are decoded.
Must act Top 3 of 4 that need code or config changes
2 packages of its own release move with it.
What you must change
Breaking4
useIntersectionObserver changes the default threshold to 0.
useIntersectionObserverthresholduseChangeCase migrates to change-case@v5.
useChangeCaseuseFuse upgrades fuse.js to v7.
useFuseuseJwt upgrades jwt-decode to v4.
useJwtAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
const TransitionPresets: Record<'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'e… → const TransitionPresets: Record<keyof typeof _TransitionPresets, CubicBezierPoints> & { linear: EasingFunction } - changed:
function asyncComputed<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState?: T, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T> → function asyncComputed<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: T, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T> - changed:
function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState?: T, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T> → function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: T, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T> - changed:
function mapGamepadToXbox360Controller(gamepad: Ref<Gamepad | undefined>): vue_demi.ComputedRef<{ buttons: { a: GamepadButton; b: GamepadButton; x: GamepadButton; y: GamepadButton }; bumper: { left: GamepadButton; right: GamepadButton }; triggers: { left: GamepadButton; right: GamepadButton }; stick: { left: { horizontal: number; vertical: number; button: GamepadButton }; right: { horizontal: num… → function mapGamepadToXbox360Controller(gamepad: Ref<Gamepad | undefined>): vue.ComputedRef<{ buttons: { a: GamepadButton; b: GamepadButton; x: GamepadButton; y: GamepadButton }; bumper: { left: GamepadButton; right: GamepadButton }; triggers: { left: GamepadButton; right: GamepadButton }; stick: { left: { horizontal: number; vertical: number; button: GamepadButton }; right: { horizontal: number;… - changed:
function templateRef<T extends HTMLElement | SVGElement | Component | null>(key: string, initialValue?: T | null): Readonly<Ref<T>> → function templateRef<T extends HTMLElement | SVGElement | Component | null, Keys extends string = string>(key: Keys, initialValue?: T | null): Readonly<Ref<T>> - changed:
function useActiveElement<T extends HTMLElement>(options?: UseActiveElementOptions): vue_demi.Ref<T | null | undefined> → function useActiveElement<T extends HTMLElement>(options?: UseActiveElementOptions): vue.Ref<T | null | undefined, T | null | undefined> - changed:
function useBattery(options?: ConfigurableNavigator): { isSupported: vue_demi.ComputedRef<boolean>; charging: vue_demi.Ref<boolean>; chargingTime: vue_demi.Ref<number>; dischargingTime: vue_demi.Ref<number>; level: vue_demi.Ref<number> } → function useBattery(options?: ConfigurableNavigator): { isSupported: vue.ComputedRef<boolean>; charging: vue.Ref<boolean, boolean>; chargingTime: vue.Ref<number, number>; dischargingTime: vue.Ref<number, number>; level: vue.Ref<number, number> } - changed:
function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, options?: UseBreakpointsOptions): Record<K, Ref<boolean>> & { greaterOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean>; smallerOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean>; greater(k: MaybeRefOrGetter<K>): Ref<boolean>; smaller(k: MaybeRefOrGetter<K>): Ref<boolean>; between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>):… → function useBreakpoints<K extends string>(breakpoints: Breakpoints<K>, options?: UseBreakpointsOptions): Record<K, Ref<boolean, boolean>> & { greaterOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean, boolean>; smallerOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean, boolean>; greater(k: MaybeRefOrGetter<K>): Ref<boolean, boolean>; smaller(k: MaybeRefOrGetter<K>): Ref<boolean, boolean>; between(a:… - changed:
function useCssVar(prop: MaybeRefOrGetter<string>, target?: MaybeElementRef, options?: UseCssVarOptions): vue_demi.Ref<string> → function useCssVar(prop: MaybeRefOrGetter<string | null | undefined>, target?: MaybeElementRef, options?: UseCssVarOptions): vue.Ref<string | null | undefined, string | null | undefined> - changed:
function useCurrentElement<T extends MaybeElement = MaybeElement, R extends VueInstance = VueInstance>(rootComponent?: MaybeElementRef<R>): _vueuse_shared.ComputedRefWithControl<T> → function useCurrentElement<T extends MaybeElement = MaybeElement, R extends VueInstance = VueInstance, E extends MaybeElement = MaybeElement extends T ? IsAny<R['$el']> extends false ? R['$el'] : T : T>(rootComponent?: MaybeElementRef<R>): _vueuse_shared.ComputedRefWithControl<E> - changed:
function useDark(options?: UseDarkOptions): vue_demi.WritableComputedRef<boolean> → function useDark(options?: UseDarkOptions): vue.WritableComputedRef<boolean, boolean> - changed:
function useDeviceMotion(options?: DeviceMotionOptions): { acceleration: Ref<DeviceMotionEventAcceleration | null>; accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>; rotationRate: Ref<DeviceMotionEventRotationRate | null>; interval: Ref<number> } → function useDeviceMotion(options?: DeviceMotionOptions): { acceleration: Ref<DeviceMotionEventAcceleration | null, DeviceMotionEventAcceleration | null>; accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null, DeviceMotionEventAcceleration | null>; rotationRate: Ref<DeviceMotionEventRotationRate | null, DeviceMotionEventRotationRate | null>; interval: Ref<number, number> } - changed:
function useDeviceOrientation(options?: ConfigurableWindow): { isSupported: vue_demi.ComputedRef<boolean>; isAbsolute: Ref<boolean>; alpha: Ref<number | null>; beta: Ref<number | null>; gamma: Ref<number | null> } → function useDeviceOrientation(options?: ConfigurableWindow): { isSupported: vue.ComputedRef<boolean>; isAbsolute: Ref<boolean, boolean>; alpha: Ref<number | null, number | null>; beta: Ref<number | null, number | null>; gamma: Ref<number | null, number | null> } - changed:
function useDevicePixelRatio(options?: ConfigurableWindow): { pixelRatio: vue_demi.Ref<number> } → function useDevicePixelRatio(options?: ConfigurableWindow): { pixelRatio: vue.Ref<number, number> } - changed:
function useDisplayMedia(options?: UseDisplayMediaOptions): { isSupported: vue_demi.ComputedRef<boolean>; stream: Ref<MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; enabled: Ref<boolean> } → function useDisplayMedia(options?: UseDisplayMediaOptions): { isSupported: vue.ComputedRef<boolean>; stream: Ref<MediaStream | undefined, MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; enabled: Ref<boolean, MaybeRef<boolean>> } - changed:
function useDraggable(target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): { position: vue_demi.Ref<{ x: number; y: number }>; isDragging: vue_demi.ComputedRef<boolean>; style: vue_demi.ComputedRef<string>; x: vue_demi.Ref<number>; y: vue_demi.Ref<number> } → function useDraggable(target: MaybeRefOrGetter<HTMLElement | SVGElement | null | undefined>, options?: UseDraggableOptions): { position: vue.Ref<{ x: number; y: number }, Position | { x: number; y: number }>; isDragging: vue.ComputedRef<boolean>; style: vue.ComputedRef<string>; x: vue.Ref<number, number>; y: vue.Ref<number, number> } | { position: vue.Ref<{ x: number; y: number }, Position | { x:… - changed:
function useElementBounding(target: MaybeComputedElementRef, options?: UseElementBoundingOptions): { height: vue_demi.Ref<number>; bottom: vue_demi.Ref<number>; left: vue_demi.Ref<number>; right: vue_demi.Ref<number>; top: vue_demi.Ref<number>; width: vue_demi.Ref<number>; x: vue_demi.Ref<number>; y: vue_demi.Ref<number>; update: () => void } → function useElementBounding(target: MaybeComputedElementRef, options?: UseElementBoundingOptions): { height: vue.Ref<number, number>; bottom: vue.Ref<number, number>; left: vue.Ref<number, number>; right: vue.Ref<number, number>; top: vue.Ref<number, number>; width: vue.Ref<number, number>; x: vue.Ref<number, number>; y: vue.Ref<number, number>; update: () => void } - changed:
function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): { width: vue_demi.Ref<number>; height: vue_demi.Ref<number>; stop: () => void } → function useElementSize(target: MaybeComputedElementRef, initialSize?: ElementSize, options?: UseResizeObserverOptions): { width: vue.Ref<number, number>; height: vue.Ref<number, number>; stop: () => void } - changed:
function useElementVisibility(element: MaybeComputedElementRef, options?: UseElementVisibilityOptions): vue_demi.Ref<boolean> → function useElementVisibility(element: MaybeComputedElementRef, options?: UseElementVisibilityOptions): vue.Ref<boolean, boolean> - changed:
function useEventListener<Names extends string, EventType = Event>(target: InferEventTarget<Names>, event: Arrayable<Names>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn → function useEventListener<Names extends string, EventType = Event>(target: MaybeRefOrGetter<InferEventTarget<Names> | null | undefined>, event: Arrayable<Names>, listener: Arrayable<GeneralEventListener<EventType>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn - changed:
function useEyeDropper(options?: UseEyeDropperOptions): { isSupported: vue_demi.ComputedRef<boolean>; sRGBHex: vue_demi.Ref<string>; open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string } | undefined> } → function useEyeDropper(options?: UseEyeDropperOptions): { isSupported: vue.ComputedRef<boolean>; sRGBHex: vue.Ref<string, string>; open: (openOptions?: EyeDropperOpenOptions) => Promise<{ sRGBHex: string } | undefined> } - changed:
function useFullscreen(target?: MaybeElementRef, options?: UseFullscreenOptions): { isSupported: vue_demi.ComputedRef<boolean>; isFullscreen: vue_demi.Ref<boolean>; enter: () => Promise<void>; exit: () => Promise<void>; toggle: () => Promise<void> } → function useFullscreen(target?: MaybeElementRef, options?: UseFullscreenOptions): { isSupported: vue.ComputedRef<boolean>; isFullscreen: vue.Ref<boolean, boolean>; enter: () => Promise<void>; exit: () => Promise<void>; toggle: () => Promise<void> } - changed:
function useGamepad(options?: UseGamepadOptions): { isSupported: vue_demi.ComputedRef<boolean>; onConnected: _vueuse_shared.EventHookOn<number>; onDisconnected: _vueuse_shared.EventHookOn<number>; gamepads: Ref<{ readonly axes: readonly number[]; readonly buttons: readonly { readonly pressed: boolean; readonly touched: boolean; readonly value: number }[]; readonly connected: boolean; readonly id:… → function useGamepad(options?: UseGamepadOptions): { isSupported: vue.ComputedRef<boolean>; onConnected: _vueuse_shared.EventHookOn<number>; onDisconnected: _vueuse_shared.EventHookOn<number>; gamepads: Ref<{ readonly axes: ReadonlyArray<number>; readonly buttons: readonly { readonly pressed: boolean; readonly touched: boolean; readonly value: number }[]; readonly connected: boolean; readonly id:… - changed:
function useGeolocation(options?: UseGeolocationOptions): { isSupported: vue_demi.ComputedRef<boolean>; coords: Ref<GeolocationCoordinates>; locatedAt: Ref<number | null>; error: vue_demi.ShallowRef<GeolocationPositionError | null>; resume: () => void; pause: () => void } → function useGeolocation(options?: UseGeolocationOptions): { isSupported: vue.ComputedRef<boolean>; coords: Ref<Omit<GeolocationCoordinates, 'toJSON'>, Omit<GeolocationCoordinates, 'toJSON'>>; locatedAt: Ref<number | null, number | null>; error: vue.ShallowRef<GeolocationPositionError | null, GeolocationPositionError | null>; resume: () => void; pause: () => void } - changed:
function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): { isLoading: vue_demi.ComputedRef<boolean> } → function useInfiniteScroll<T extends InfiniteScrollElement>(element: MaybeRefOrGetter<T>, onLoadMore: (state: UnwrapNestedRefs<ReturnType<typeof useScroll>>) => Awaitable<void>, options?: UseInfiniteScrollOptions<T>): { isLoading: vue.ComputedRef<boolean>; reset(): void } - changed:
function useMediaControls(target: MaybeRef<HTMLMediaElement | null | undefined>, options?: UseMediaControlsOptions): { currentTime: vue_demi.Ref<number>; duration: vue_demi.Ref<number>; waiting: vue_demi.Ref<boolean>; seeking: vue_demi.Ref<boolean>; ended: vue_demi.Ref<boolean>; stalled: vue_demi.Ref<boolean>; buffered: vue_demi.Ref<[number, number][]>; playing: vue_demi.Ref<boolean>; rate: vue_d… → function useMediaControls(target: MaybeRef<HTMLMediaElement | null | undefined>, options?: UseMediaControlsOptions): { currentTime: vue.Ref<number, number>; duration: vue.Ref<number, number>; waiting: vue.Ref<boolean, boolean>; seeking: vue.Ref<boolean, boolean>; ended: vue.Ref<boolean, boolean>; stalled: vue.Ref<boolean, boolean>; buffered: vue.Ref<[number, number][], [number, number][]>; playin… - changed:
function useMediaQuery(query: MaybeRefOrGetter<string>, options?: ConfigurableWindow): vue_demi.Ref<boolean> → function useMediaQuery(query: MaybeRefOrGetter<string>, options?: ConfigurableWindow): vue.Ref<boolean, boolean> - changed:
function useMemory(options?: UseMemoryOptions): { isSupported: vue_demi.ComputedRef<boolean>; memory: vue_demi.Ref<MemoryInfo | undefined> } → function useMemory(options?: UseMemoryOptions): { isSupported: vue.ComputedRef<boolean>; memory: vue.Ref<MemoryInfo | undefined, MemoryInfo | undefined> } - changed:
function useMounted(): vue_demi.Ref<boolean> → function useMounted(): vue.Ref<boolean, boolean> - changed:
function useMouse(options?: UseMouseOptions): { x: vue_demi.Ref<number>; y: vue_demi.Ref<number>; sourceType: vue_demi.Ref<UseMouseSourceType> } → function useMouse(options?: UseMouseOptions): { x: vue.Ref<number, number>; y: vue.Ref<number, number>; sourceType: vue.Ref<UseMouseSourceType, UseMouseSourceType> } - changed:
function useMouseInElement(target?: MaybeElementRef, options?: MouseInElementOptions): { x: vue_demi.Ref<number>; y: vue_demi.Ref<number>; sourceType: vue_demi.Ref<UseMouseSourceType>; elementX: vue_demi.Ref<number>; elementY: vue_demi.Ref<number>; elementPositionX: vue_demi.Ref<number>; elementPositionY: vue_demi.Ref<number>; elementHeight: vue_demi.Ref<number>; elementWidth: vue_demi.Ref<number… → function useMouseInElement(target?: MaybeElementRef, options?: MouseInElementOptions): { x: vue.Ref<number, number>; y: vue.Ref<number, number>; sourceType: vue.Ref<UseMouseSourceType, UseMouseSourceType>; elementX: vue.Ref<number, number>; elementY: vue.Ref<number, number>; elementPositionX: vue.Ref<number, number>; elementPositionY: vue.Ref<number, number>; elementHeight: vue.Ref<number, number… - changed:
function useMousePressed(options?: MousePressedOptions): { pressed: vue_demi.Ref<boolean>; sourceType: vue_demi.Ref<UseMouseSourceType> } → function useMousePressed(options?: MousePressedOptions): { pressed: vue.Ref<boolean, boolean>; sourceType: vue.Ref<UseMouseSourceType, UseMouseSourceType> } - changed:
function useMutationObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>, callback: MutationCallback, options?: UseMutationObserverOptions): { isSupported: vue_demi.ComputedRef<boolean>; stop: () => void; takeRecords: () => MutationRecord[] | undefined } → function useMutationObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>, callback: MutationCallback, options?: UseMutationObserverOptions): { isSupported: vue.ComputedRef<boolean>; stop: () => void; takeRecords: () => MutationRecord[] | undefined } - changed:
function useObjectUrl(object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>): Readonly<vue_demi.Ref<string | undefined>> → function useObjectUrl(object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>): Readonly<vue.Ref<string | undefined, string | undefined>> - changed:
function useOnline(options?: ConfigurableWindow): vue.Ref<boolean> → function useOnline(options?: ConfigurableWindow): Readonly<vue.Ref<boolean, boolean>> - changed:
function usePageLeave(options?: ConfigurableWindow): vue_demi.Ref<boolean> → function usePageLeave(options?: ConfigurableWindow): vue.Ref<boolean, boolean> - changed:
function usePointer(options?: UsePointerOptions): { isInside: Ref<boolean>; pressure: Ref<number>; pointerId: Ref<number>; tiltX: Ref<number>; tiltY: Ref<number>; width: Ref<number>; height: Ref<number>; twist: Ref<number>; pointerType: Ref<PointerType | null>; x: Ref<number>; y: Ref<number> } → function usePointer(options?: UsePointerOptions): { isInside: Ref<boolean, boolean>; pressure: Ref<number, number>; pointerId: Ref<number, number>; tiltX: Ref<number, number>; tiltY: Ref<number, number>; width: Ref<number, number>; height: Ref<number, number>; twist: Ref<number, number>; pointerType: Ref<PointerType | null, PointerType | null>; x: Ref<number, number>; y: Ref<number, number> } - changed:
function usePointerLock(target?: MaybeElementRef<MaybeHTMLElement>, options?: UsePointerLockOptions): { isSupported: vue_demi.ComputedRef<boolean>; element: vue_demi.Ref<MaybeHTMLElement>; triggerElement: vue_demi.Ref<MaybeHTMLElement>; lock: (e: MaybeElementRef<MaybeHTMLElement> | Event) => Promise<HTMLElement>; unlock: () => Promise<boolean> } → function usePointerLock(target?: MaybeElementRef<MaybeHTMLElement>, options?: UsePointerLockOptions): { isSupported: vue.ComputedRef<boolean>; element: vue.Ref<MaybeHTMLElement, MaybeHTMLElement>; triggerElement: vue.Ref<MaybeHTMLElement, MaybeHTMLElement>; lock: (e: MaybeElementRef<MaybeHTMLElement> | Event) => Promise<HTMLElement>; unlock: () => Promise<boolean> } - changed:
function usePreferredColorScheme(options?: ConfigurableWindow): vue_demi.ComputedRef<ColorSchemeType> → function usePreferredColorScheme(options?: ConfigurableWindow): vue.ComputedRef<ColorSchemeType> - changed:
function usePreferredContrast(options?: ConfigurableWindow): vue_demi.ComputedRef<ContrastType> → function usePreferredContrast(options?: ConfigurableWindow): vue.ComputedRef<ContrastType> - changed:
function usePreferredDark(options?: ConfigurableWindow): vue.Ref<boolean> → function usePreferredDark(options?: ConfigurableWindow): vue.Ref<boolean, boolean> - changed:
function usePreferredReducedMotion(options?: ConfigurableWindow): vue_demi.ComputedRef<ReducedMotionType> → function usePreferredReducedMotion(options?: ConfigurableWindow): vue.ComputedRef<ReducedMotionType> - changed:
function useResizeObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[], callback: ResizeObserverCallback, options?: UseResizeObserverOptions): { isSupported: vue_demi.ComputedRef<boolean>; stop: () => void } → function useResizeObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>, callback: ResizeObserverCallback, options?: UseResizeObserverOptions): { isSupported: vue.ComputedRef<boolean>; stop: () => void } - changed:
function useScreenOrientation(options?: ConfigurableWindow): { isSupported: vue_demi.ComputedRef<boolean>; orientation: vue_demi.Ref<OrientationType | undefined>; angle: vue_demi.Ref<number>; lockOrientation: (type: OrientationLockType) => Promise<void>; unlockOrientation: () => void } → function useScreenOrientation(options?: ConfigurableWindow): { isSupported: vue.ComputedRef<boolean>; orientation: vue.Ref<OrientationType | undefined, OrientationType | undefined>; angle: vue.Ref<number, number>; lockOrientation: (type: OrientationLockType) => Promise<void>; unlockOrientation: () => void } - changed:
function useScreenSafeArea(): { top: vue_demi.Ref<string>; right: vue_demi.Ref<string>; bottom: vue_demi.Ref<string>; left: vue_demi.Ref<string>; update: () => void } → function useScreenSafeArea(): { top: vue.Ref<string, string>; right: vue.Ref<string, string>; bottom: vue.Ref<string, string>; left: vue.Ref<string, string>; update: () => void } - changed:
function useScriptTag(src: MaybeRefOrGetter<string>, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): { scriptTag: vue_demi.Ref<HTMLScriptElement | null>; load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>; unload: () => void } → function useScriptTag(src: MaybeRefOrGetter<string>, onLoaded?: (el: HTMLScriptElement) => void, options?: UseScriptTagOptions): { scriptTag: vue.Ref<HTMLScriptElement | null, HTMLScriptElement | null>; load: (waitForScriptLoad?: boolean) => Promise<HTMLScriptElement | boolean>; unload: () => void } - changed:
function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): { x: vue_demi.WritableComputedRef<number>; y: vue_demi.WritableComputedRef<number>; isScrolling: vue_demi.Ref<boolean>; arrivedState: { left: boolean; right: boolean; top: boolean; bottom: boolean }; directions: { left: boolean; right: boolean; top: boolean;… → function useScroll(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, options?: UseScrollOptions): { x: vue.WritableComputedRef<number, number>; y: vue.WritableComputedRef<number, number>; isScrolling: vue.Ref<boolean, boolean>; arrivedState: { left: boolean; right: boolean; top: boolean; bottom: boolean }; directions: { left: boolean; right: boolean; top:… - changed:
function useScrollLock(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, initialState?: boolean): vue_demi.WritableComputedRef<boolean> → function useScrollLock(element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>, initialState?: boolean): vue.WritableComputedRef<boolean, boolean> - changed:
function useSpeechRecognition(options?: UseSpeechRecognitionOptions): { isSupported: vue_demi.ComputedRef<boolean>; isListening: Ref<boolean>; isFinal: Ref<boolean>; recognition: SpeechRecognition | undefined; result: Ref<string>; error: Ref<SpeechRecognitionErrorEvent | undefined>; toggle: (value?: boolean) => void; start: () => void; stop: () => void } → function useSpeechRecognition(options?: UseSpeechRecognitionOptions): { isSupported: vue.ComputedRef<boolean>; isListening: Ref<boolean, boolean>; isFinal: Ref<boolean, boolean>; recognition: SpeechRecognition | undefined; result: Ref<string, string>; error: Ref<SpeechRecognitionErrorEvent | undefined, SpeechRecognitionErrorEvent | undefined>; toggle: (value?: boolean) => void; start: () => void;… - changed:
function useSpeechSynthesis(text: MaybeRefOrGetter<string>, options?: UseSpeechSynthesisOptions): { isSupported: vue_demi.ComputedRef<boolean>; isPlaying: Ref<boolean>; status: Ref<UseSpeechSynthesisStatus>; utterance: vue_demi.ComputedRef<SpeechSynthesisUtterance>; error: Ref<SpeechSynthesisErrorEvent | undefined>; stop: () => void; toggle: (value?: boolean) => void; speak: () => void } → function useSpeechSynthesis(text: MaybeRefOrGetter<string>, options?: UseSpeechSynthesisOptions): { isSupported: vue.ComputedRef<boolean>; isPlaying: Ref<boolean, boolean>; status: Ref<UseSpeechSynthesisStatus, UseSpeechSynthesisStatus>; utterance: vue.ComputedRef<SpeechSynthesisUtterance>; error: Ref<SpeechSynthesisErrorEvent | undefined, SpeechSynthesisErrorEvent | undefined>; stop: () => void;… - changed:
function useSupported(callback: () => unknown): vue_demi.ComputedRef<boolean> → function useSupported(callback: () => unknown): vue.ComputedRef<boolean> - changed:
function useTextDirection(options?: UseTextDirectionOptions): vue_demi.WritableComputedRef<UseTextDirectionValue> → function useTextDirection(options?: UseTextDirectionOptions): vue.WritableComputedRef<UseTextDirectionValue, UseTextDirectionValue> - changed:
function useTextSelection(options?: ConfigurableWindow): { text: vue_demi.ComputedRef<string>; rects: vue_demi.ComputedRef<DOMRect[]>; ranges: vue_demi.ComputedRef<Range[]>; selection: vue_demi.Ref<{ readonly anchorNode: Node | null; readonly anchorOffset: number; readonly focusNode: Node | null; readonly focusOffset: number; readonly isCollapsed: boolean; readonly rangeCount: number; readonly ty… → function useTextSelection(options?: ConfigurableWindow): { text: vue.ComputedRef<string>; rects: vue.ComputedRef<DOMRect[]>; ranges: vue.ComputedRef<Range[]>; selection: vue.Ref<{ readonly anchorNode: Node | null; readonly anchorOffset: number; readonly direction: string; readonly focusNode: Node | null; readonly focusOffset: number; readonly isCollapsed: boolean; readonly rangeCount: number; rea… - changed:
function useTextareaAutosize(options?: UseTextareaAutosizeOptions): { textarea: vue_demi.Ref<HTMLTextAreaElement>; input: vue_demi.Ref<string>; triggerResize: () => void } → function useTextareaAutosize(options?: UseTextareaAutosizeOptions): { textarea: vue.Ref<HTMLTextAreaElement, HTMLTextAreaElement>; input: vue.Ref<string, string>; triggerResize: () => void } - changed:
function useUserMedia(options?: UseUserMediaOptions): { isSupported: vue_demi.ComputedRef<boolean>; stream: Ref<MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; restart: () => Promise<MediaStream | undefined>; constraints: Ref<MediaStreamConstraints | { audio?: boolean | { advanced?: { aspectRatio?: number | { exact?: number | undefined; ideal?: number |… → function useUserMedia(options?: UseUserMediaOptions): { isSupported: vue.ComputedRef<boolean>; stream: Ref<MediaStream | undefined, MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; restart: () => Promise<MediaStream | undefined>; constraints: Ref<MediaStreamConstraints | { audio?: boolean | { advanced?: { aspectRatio?: number | { exact?: number | undefine… - changed:
function useWakeLock(options?: UseWakeLockOptions): { isSupported: vue_demi.ComputedRef<boolean>; isActive: vue_demi.Ref<boolean>; request: (type: WakeLockType) => Promise<void>; release: () => Promise<void> } → function useWakeLock(options?: UseWakeLockOptions): { sentinel: vue.ShallowRef<WakeLockSentinel | null, WakeLockSentinel | null>; isSupported: vue.ComputedRef<boolean>; isActive: vue.ComputedRef<boolean>; request: (type: WakeLockType) => Promise<void>; forceRequest: (type: WakeLockType) => Promise<void>; release: () => Promise<void> } - changed:
function useWebNotification(options?: UseWebNotificationOptions): { isSupported: vue_demi.ComputedRef<boolean>; notification: Ref<Notification | null>; ensurePermissions: () => Promise<boolean | undefined>; permissionGranted: Ref<boolean>; show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>; close: () => void; onClick: _vueuse_shared.EventHookOn<any>; onShow: _vueuse_s… → function useWebNotification(options?: UseWebNotificationOptions): { isSupported: vue.ComputedRef<boolean>; notification: Ref<Notification | null, Notification | null>; ensurePermissions: () => Promise<boolean | undefined>; permissionGranted: Ref<boolean, boolean>; show: (overrides?: WebNotificationOptions) => Promise<Notification | undefined>; close: () => void; onClick: _vueuse_shared.EventHookO… - changed:
function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(fn: T, options?: UseWebWorkerOptions): { workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>; workerStatus: vue_demi.Ref<WebWorkerStatus>; workerTerminate: (status?: WebWorkerStatus) => void } → function useWebWorkerFn<T extends (...fnArgs: any[]) => any>(fn: T, options?: UseWebWorkerOptions): { workerFn: (...fnArgs: Parameters<T>) => Promise<ReturnType<T>>; workerStatus: vue.Ref<WebWorkerStatus, WebWorkerStatus>; workerTerminate: (status?: WebWorkerStatus) => void } - changed:
function useWindowScroll(options?: UseWindowScrollOptions): { x: vue_demi.Ref<number>; y: vue_demi.Ref<number> } → function useWindowScroll(options?: UseWindowScrollOptions): { x: vue.Ref<number, number>; y: vue.Ref<number, number> } - changed:
function useWindowSize(options?: UseWindowSizeOptions): { width: vue_demi.Ref<number>; height: vue_demi.Ref<number> } → function useWindowSize(options?: UseWindowSizeOptions): { width: vue.Ref<number, number>; height: vue.Ref<number, number> } - changed:
property NetworkState.downlink: Ref<number | undefined> → property NetworkState.downlink: Readonly<Ref<number | undefined>> - changed:
property NetworkState.downlinkMax: Ref<number | undefined> → property NetworkState.downlinkMax: Readonly<Ref<number | undefined>> - changed:
property NetworkState.effectiveType: Ref<NetworkEffectiveType | undefined> → property NetworkState.effectiveType: Readonly<Ref<NetworkEffectiveType | undefined>> - changed:
property NetworkState.isOnline: Ref<boolean> → property NetworkState.isOnline: Readonly<Ref<boolean>> - changed:
property NetworkState.isSupported: Ref<boolean> → property NetworkState.isSupported: Readonly<Ref<boolean>> - changed:
property NetworkState.offlineAt: Ref<number | undefined> → property NetworkState.offlineAt: Readonly<Ref<number | undefined>> - changed:
property NetworkState.onlineAt: Ref<number | undefined> → property NetworkState.onlineAt: Readonly<Ref<number | undefined>> - changed:
property NetworkState.rtt: Ref<number | undefined> → property NetworkState.rtt: Readonly<Ref<number | undefined>> - changed:
property NetworkState.saveData: Ref<boolean | undefined> → property NetworkState.saveData: Readonly<Ref<boolean | undefined>> - changed:
property NetworkState.type: Ref<NetworkType> → property NetworkState.type: Readonly<Ref<NetworkType>> - changed:
property OnClickOutsideOptions.ignore?: (MaybeElementRef | string)[] → property OnClickOutsideOptions.ignore?: MaybeRefOrGetter<(MaybeElementRef | string)[]> - changed:
property RenderableComponent.as?: Object | string → property RenderableComponent.as?: object | string - changed:
property UseIntersectionObserverOptions.root?: MaybeComputedElementRef → property UseIntersectionObserverOptions.root?: MaybeComputedElementRef | Document - changed:
property UseManualRefHistoryReturn.canRedo: Ref<boolean> → property UseManualRefHistoryReturn.canRedo: ComputedRef<boolean> - changed:
property UseManualRefHistoryReturn.canUndo: Ref<boolean> → property UseManualRefHistoryReturn.canUndo: ComputedRef<boolean> - changed:
property UseTextareaAutosizeOptions.styleTarget?: MaybeRef<HTMLElement> → property UseTextareaAutosizeOptions.styleTarget?: MaybeRef<HTMLElement | undefined> - changed:
property UseWebSocketOptions.heartbeat?: boolean | { message?: string | ArrayBuffer | Blob; interval?: number; pongTimeout?: number } → property UseWebSocketOptions.heartbeat?: boolean | { message?: string | ArrayBuffer | Blob; responseMessage?: string | ArrayBuffer | Blob; interval?: number; pongTimeout?: number } - changed:
readonly property ResizeObserverEntry.borderBoxSize?: ReadonlyArray<ResizeObserverSize> → readonly property ResizeObserverEntry.borderBoxSize: ReadonlyArray<ResizeObserverSize> - changed:
readonly property ResizeObserverEntry.contentBoxSize?: ReadonlyArray<ResizeObserverSize> → readonly property ResizeObserverEntry.contentBoxSize: ReadonlyArray<ResizeObserverSize> - changed:
readonly property ResizeObserverEntry.devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize> → readonly property ResizeObserverEntry.devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize> - changed:
type TemplatePromise<Return, Args extends any[] = []> = DefineComponent<{}> & { new (): { $slots: { default: (_: TemplatePromiseProps<Return, Args>) => any } } } & { start: (...args: Args) => Promise<Return> } → type TemplatePromise<Return, Args extends any[] = []> = DefineComponent<object> & { new (): { $slots: { default: (_: TemplatePromiseProps<Return, Args>) => any } } } & { start: (...args: Args) => Promise<Return> } - changed:
type TemplateRefsList<T> = T[] & { set: (el: Object | null) => void } → type TemplateRefsList<T> = T[] & { set: (el: object | null) => void } - added:
const breakpointsElement: { xs: number; sm: number; md: number; lg: number; xl: number } - added:
function asyncComputed<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState?: undefined, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T | undefined> - added:
function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState?: undefined, optionsOrRef?: Ref<boolean> | AsyncComputedOptions): Ref<T | undefined> - added:
property UseDraggableOptions.buttons?: MaybeRefOrGetter<number[]> - added:
property UseDropZoneOptions.multiple?: boolean - added:
property UseDropZoneOptions.preventDefaultForUnhandled?: boolean - added:
property UseElementBoundingOptions.updateTiming?: 'sync' | 'next-frame' - added:
property UseFileDialogReturn.onCancel: EventHookOn - added:
property UseSpeechRecognitionOptions.maxAlternatives?: number - added:
property UseWindowSizeOptions.type?: 'inner' | 'outer'