Upgrading @vueuse/core 12 to 13
Breaking12.8.2 → 13.9.0Breaking2Deprecated1New25Changed6Fixed39Other4
Fetching 12 releases from GitHub…10 / 12
BreakingUpgrade verdict
2 breaking changes.
In plain terms
- If an async state call fails and you did not set your own error handler, the error is now reported through the browser's global error reporting instead of being silently ignored.
- The package can no longer be loaded with require() in CommonJS projects; it must be imported as an ES module.
- The templateRef utility is now deprecated and may be removed in a future release.
Must act 3 items need code or config changes
Drops vue.
Installs 3 packages in all (was 26).
What you must change
Breaking2
useAsyncState now defaults onError to globalThis.reportError.
useAsyncStateglobalThis.reportErroronErrorDrops the CJS build, so the package is now ESM-only.
Deprecations to plan for
Deprecated1
Marks templateRef as deprecated.
templateRefAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- changed:
function onClickOutside(target: MaybeElementRef, handler: OnClickOutsideHandler<{ detectIframe: OnClickOutsideOptions['detectIframe']; controls: false }>, options?: OnClickOutsideOptions<false>): Fn → function onClickOutside<T extends OnClickOutsideOptions<true>>(target: MaybeElementRef, handler: OnClickOutsideHandler<T>, options: T): OnClickOutsideControlsReturn - changed:
function onClickOutside(target: MaybeElementRef, handler: OnClickOutsideHandler<{ detectIframe: OnClickOutsideOptions['detectIframe']; controls: true }>, options: OnClickOutsideOptions<true>): { stop: Fn; cancel: Fn; trigger: (event: Event) => void } → function onClickOutside<T extends OnClickOutsideOptions>(target: MaybeElementRef, handler: OnClickOutsideHandler<T>, options?: T): Fn - changed:
function useAsyncState<Data, Params extends any[] = any[], Shallow extends boolean = true>(promise: Promise<Data> | ((...args: Params) => Promise<Data>), initialState: Data, options?: UseAsyncStateOptions<Shallow, Data>): UseAsyncStateReturn<Data, Params, Shallow> → function useAsyncState<Data, Params extends any[] = any[], Shallow extends boolean = true>(promise: Promise<Data> | ((...args: Params) => Promise<Data>), initialState: MaybeRef<Data>, options?: UseAsyncStateOptions<Shallow, Data>): UseAsyncStateReturn<Data, Params, Shallow> - changed:
function useDevicePixelRatio(options?: ConfigurableWindow): { pixelRatio: Readonly<vue.Ref<number, number>>; stop: () => void } → function useDevicePixelRatio(options?: ConfigurableWindow): { pixelRatio: Readonly<vue.Ref<number, number>>; stop: WatchStopHandle } - changed:
function useDisplayMedia(options?: UseDisplayMediaOptions): { isSupported: vue.ComputedRef<boolean>; stream: vue.ShallowRef<MediaStream | undefined, MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; enabled: vue.Ref<boolean, boolean> | vue.ShallowRef<boolean, boolean> | vue.WritableComputedRef<boolean, boolean> | vue.ShallowRef<true, true> | vue.ShallowRef… → function useDisplayMedia(options?: UseDisplayMediaOptions): { isSupported: vue.ComputedRef<boolean>; stream: vue.ShallowRef<MediaStream | undefined, MediaStream | undefined>; start: () => Promise<MediaStream | undefined>; stop: () => void; enabled: vue.Ref<boolean, boolean> | vue.ShallowRef<boolean, boolean> | vue.WritableComputedRef<boolean, boolean> | vue.ShallowRef<false, false> | vue.ShallowR… - changed:
function useDropZone(target: MaybeRefOrGetter<HTMLElement | null | undefined>, options?: UseDropZoneOptions | UseDropZoneOptions['onDrop']): UseDropZoneReturn → function useDropZone(target: MaybeRefOrGetter<HTMLElement | Document | null | undefined>, options?: UseDropZoneOptions | UseDropZoneOptions['onDrop']): UseDropZoneReturn - changed:
function useEventListener<E extends keyof DocumentEventMap>(target: DocumentOrShadowRoot, event: MaybeRefOrGetter<Arrayable<E>>, listener: MaybeRef<Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn → function useEventListener<E extends keyof DocumentEventMap>(target: Document, event: MaybeRefOrGetter<Arrayable<E>>, listener: MaybeRef<Arrayable<(this: Document, ev: DocumentEventMap[E]) => any>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn - changed:
function useEventListener<E extends keyof HTMLElementEventMap>(target: MaybeRefOrGetter<Arrayable<HTMLElement> | null | undefined>, event: MaybeRefOrGetter<Arrayable<E>>, listener: MaybeRef<(this: HTMLElement, ev: HTMLElementEventMap[E]) => any>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): () => void → function useEventListener<E extends keyof HTMLElementEventMap>(target: MaybeRefOrGetter<Arrayable<HTMLElement> | null | undefined>, event: MaybeRefOrGetter<Arrayable<E>>, listener: MaybeRef<(this: HTMLElement, ev: HTMLElementEventMap[E]) => any>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn - changed:
function useEventSource<Events extends string[], Data = any>(url: MaybeRefOrGetter<string | URL | undefined>, events?: Events, options?: UseEventSourceOptions): UseEventSourceReturn<Events> → function useEventSource<Events extends string[], Data = any>(url: MaybeRefOrGetter<string | URL | undefined>, events?: Events, options?: UseEventSourceOptions<Data>): UseEventSourceReturn<Events, Data> - changed:
function useLocalStorage(key: MaybeRefOrGetter$1<string>, initialValue: MaybeRefOrGetter$1<boolean>, options?: UseStorageOptions<boolean>): RemovableRef<boolean> → function useLocalStorage(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<boolean>, options?: UseStorageOptions<boolean>): RemovableRef<boolean> - changed:
function useLocalStorage(key: MaybeRefOrGetter$1<string>, initialValue: MaybeRefOrGetter$1<number>, options?: UseStorageOptions<number>): RemovableRef<number> → function useLocalStorage(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<number>, options?: UseStorageOptions<number>): RemovableRef<number> - changed:
function useLocalStorage(key: MaybeRefOrGetter$1<string>, initialValue: MaybeRefOrGetter$1<string>, options?: UseStorageOptions<string>): RemovableRef<string> → function useLocalStorage(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<string>, options?: UseStorageOptions<string>): RemovableRef<string> - changed:
function useLocalStorage<T = unknown>(key: MaybeRefOrGetter$1<string>, initialValue: MaybeRefOrGetter$1<null>, options?: UseStorageOptions<T>): RemovableRef<T> → function useLocalStorage<T = unknown>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<null>, options?: UseStorageOptions<T>): RemovableRef<T> - changed:
function useLocalStorage<T>(key: MaybeRefOrGetter$1<string>, initialValue: MaybeRefOrGetter$1<T>, options?: UseStorageOptions<T>): RemovableRef<T> → function useLocalStorage<T>(key: MaybeRefOrGetter<string>, initialValue: MaybeRefOrGetter<T>, options?: UseStorageOptions<T>): RemovableRef<T> - changed:
function usePreferredLanguages(options?: ConfigurableWindow): Ref<readonly string[]> → function usePreferredLanguages(options?: ConfigurableWindow): ShallowRef<readonly string[]> - changed:
function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<boolean>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<boolean>): RemovableRef<boolean> → function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<boolean>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<boolean>): RemovableRef<boolean> & Promise<RemovableRef<boolean>> - changed:
function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<number>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<number>): RemovableRef<number> → function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<number>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<number>): RemovableRef<number> & Promise<RemovableRef<number>> - changed:
function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<string>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<string>): RemovableRef<string> → function useStorageAsync(key: string, initialValue: MaybeRefOrGetter<string>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<string>): RemovableRef<string> & Promise<RemovableRef<string>> - changed:
function useStorageAsync<T = unknown>(key: string, initialValue: MaybeRefOrGetter<null>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T> → function useStorageAsync<T = unknown>(key: string, initialValue: MaybeRefOrGetter<null>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T> & Promise<RemovableRef<T>> - changed:
function useStorageAsync<T>(key: string, initialValue: MaybeRefOrGetter<T>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T> → function useStorageAsync<T>(key: string, initialValue: MaybeRefOrGetter<T>, storage?: StorageLikeAsync, options?: UseStorageAsyncOptions<T>): RemovableRef<T> & Promise<RemovableRef<T>> - changed:
function useTextareaAutosize(options?: UseTextareaAutosizeOptions): { textarea: vue.Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>; input: vue.Ref<string, string>; triggerResize: () => void } → function useTextareaAutosize(options?: UseTextareaAutosizeOptions): { textarea: vue.Ref<HTMLTextAreaElement | null | undefined, HTMLTextAreaElement | null | undefined>; input: vue.Ref<string, string>; triggerResize: () => void } - changed:
function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeRefOrGetter<Date | number | string>, options: UseTimeAgoOptions<true, UnitNames>): UseTimeAgoReturn<true> → function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeRefOrGetter<Date | number | string>, options: UseTimeAgoOptions<true, UnitNames>): UseTimeAgoReturn$1<true> - changed:
function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeRefOrGetter<Date | number | string>, options?: UseTimeAgoOptions<false, UnitNames>): UseTimeAgoReturn<false> → function useTimeAgo<UnitNames extends string = UseTimeAgoUnitNamesDefault>(time: MaybeRefOrGetter<Date | number | string>, options?: UseTimeAgoOptions<false, UnitNames>): UseTimeAgoReturn$1<false> - changed:
interface AsyncComputedOptions → interface AsyncComputedOptions<Lazy = boolean> - changed:
interface TransitionOptions → interface TransitionOptions extends ConfigurableWindow - changed:
interface UseEventSourceOptions extends EventSourceInit → interface UseEventSourceOptions<Data> extends EventSourceInit - changed:
property AsyncComputedOptions.lazy?: boolean → property AsyncComputedOptions.lazy?: Lazy - changed:
property OnLongPressOptions.delay?: number → property OnLongPressOptions.delay?: number | ((ev: PointerEvent) => number) - changed:
property UseClipboardItemsReturn.content: ComputedRef<ClipboardItems> → property UseClipboardItemsReturn.content: Readonly<Ref<ClipboardItems>> - changed:
property UseClipboardItemsReturn.copied: ComputedRef<boolean> → property UseClipboardItemsReturn.copied: Readonly<ShallowRef<boolean>> - changed:
property UseEventSourceReturn.data: ShallowRef<Data> → property UseEventSourceReturn.data: ShallowRef<Data | null> - changed:
property UseFetchReturn.abort: Fn → property UseFetchReturn.abort: (reason?: any) => void - changed:
property UseFileDialogOptions.accept?: string → property UseFileDialogOptions.accept?: MaybeRef<string> - changed:
property UseFileDialogOptions.capture?: string → property UseFileDialogOptions.capture?: MaybeRef<string> - changed:
property UseFileDialogOptions.directory?: boolean → property UseFileDialogOptions.directory?: MaybeRef<boolean> - changed:
property UseFileDialogOptions.multiple?: boolean → property UseFileDialogOptions.multiple?: MaybeRef<boolean> - changed:
property UseFileDialogOptions.reset?: boolean → property UseFileDialogOptions.reset?: MaybeRef<boolean> - changed:
property UseSpeechSynthesisOptions.volume?: SpeechSynthesisUtterance['volume'] → property UseSpeechSynthesisOptions.volume?: MaybeRefOrGetter<SpeechSynthesisUtterance['volume']> - changed:
property UseTextareaAutosizeOptions.element?: MaybeRef<HTMLTextAreaElement | undefined> → property UseTextareaAutosizeOptions.element?: MaybeRef<HTMLTextAreaElement | undefined | null> - changed:
type ComputedInjectGetter<T, K> = (source: T | undefined, ctx?: any) => K → type ComputedInjectGetter<T, K> = (source: T | undefined, oldValue?: K) => K - changed:
type ComputedInjectGetterWithDefault<T, K> = (source: T, ctx?: any) => K → type ComputedInjectGetterWithDefault<T, K> = (source: T, oldValue?: K) => K - changed:
type OnClickOutsideHandler<T extends { detectIframe: OnClickOutsideOptions['detectIframe']; controls: boolean } = { detectIframe: false; controls: false }> = (event: T['controls'] extends true ? Event | (T['detectIframe'] extends true ? PointerEvent | FocusEvent : PointerEvent) : T['detectIframe'] extends true ? Poi… → type OnClickOutsideHandler<T extends OnClickOutsideOptions<boolean> = OnClickOutsideOptions> = (event: (T['detectIframe'] extends true ? FocusEvent : never) | (T['controls'] extends true ? Event : never) | PointerEvent) => void - added:
function asyncComputed<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: T, optionsOrRef: AsyncComputedOptions<true>): ComputedRef<T> - added:
function asyncComputed<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: undefined, optionsOrRef: AsyncComputedOptions<true>): ComputedRef<T | undefined> - added:
function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: T, optionsOrRef: AsyncComputedOptions<true>): ComputedRef<T> - added:
function computedAsync<T>(evaluationCallback: (onCancel: AsyncComputedOnCancel) => T | Promise<T>, initialState: undefined, optionsOrRef: AsyncComputedOptions<true>): ComputedRef<T | undefined> - added:
function formatTimeAgoIntl(from: Date, options?: FormatTimeAgoIntlOptions, now?: Date | number): string - added:
function formatTimeAgoIntlParts(parts: Intl.RelativeTimeFormatPart[], options?: FormatTimeAgoIntlOptions): string - added:
function useEventListener<E extends keyof ShadowRootEventMap>(target: MaybeRefOrGetter<Arrayable<ShadowRoot> | null | undefined>, event: MaybeRefOrGetter<Arrayable<E>>, listener: MaybeRef<Arrayable<(this: ShadowRoot, ev: ShadowRootEventMap[E]) => any>>, options?: MaybeRefOrGetter<boolean | AddEventListenerOptions>): Fn - added:
function useTimeAgoIntl(time: MaybeRefOrGetter<Date | number | string>, options: UseTimeAgoIntlOptions<true>): UseTimeAgoReturn<true> - added:
function useTimeAgoIntl(time: MaybeRefOrGetter<Date | number | string>, options?: UseTimeAgoIntlOptions<false>): UseTimeAgoReturn<false> - added:
interface FormatTimeAgoIntlOptions - added:
interface TimeAgoUnit - added:
interface UseTimeAgoIntlOptions<Controls extends boolean> extends FormatTimeAgoIntlOptions - added:
property AsyncComputedOptions.flush?: 'pre' | 'post' | 'sync' - added:
property FormatTimeAgoIntlOptions.insertSpace?: boolean - added:
property FormatTimeAgoIntlOptions.joinParts?: (parts: Intl.RelativeTimeFormatPart[], locale?: Intl.UnicodeBCP47LocaleIdentifier | Intl.Locale) => string - added:
property FormatTimeAgoIntlOptions.locale?: Locale - added:
property FormatTimeAgoIntlOptions.relativeTimeFormatOptions?: Intl.RelativeTimeFormatOptions - added:
property MouseInElementOptions.windowResize?: boolean - added:
property MouseInElementOptions.windowScroll?: boolean - added:
property TimeAgoUnit.ms: number - added:
property TimeAgoUnit.name: Intl.RelativeTimeFormatUnit - added:
property UseAsyncStateReturnBase.executeImmediate: (...args: Params) => Promise<Data> - added:
property UseClipboardItemsReturn.read: () => void - added:
property UseEventSourceOptions.serializer?: { read: (v?: string) => Data } - added:
property UseFileDialogOptions.input?: MaybeElementRef<HTMLInputElement> - added:
property UseNowOptions.immediate?: boolean - added:
property UseRefHistoryOptions.shouldCommit?: (oldValue: Raw | undefined, newValue: Raw) => boolean - added:
property UseScriptTagOptions.nonce?: string - added:
property UseScrollOptions.observe?: boolean | { mutation?: boolean } - added:
property UseSpeechSynthesisOptions.onBoundary?: (event: SpeechSynthesisEvent) => void - added:
property UseStorageAsyncOptions.onReady?: (value: T) => void - added:
property UseStyleTagOptions.nonce?: string - added:
property UseTimeAgoIntlOptions.controls?: Controls - added:
property UseTimeAgoIntlOptions.updateInterval?: number - added:
property UseUrlSearchParamsOptions.stringify?: (params: URLSearchParams) => string - added:
type ShadowRootEventName = keyof ShadowRootEventMap