🎉
Thanks!
@neelance @matias-capeletto @maxma241 @scottbedard
@darkxanter @anteriovieira @amrbashir @liaoliao666
@yangger6 @Demivan @iGalaxyz @sxzz @sibbng @Ericteen
New Features
- 13 new functions
pausableWatch,debouncedWatch, etc. - New @vueuse/router package.
- Reviewed every function and refactored with more consistent and flexible APIs.
- New Guide docs.
- Event filter system.
- Bundle size report for each function
- Fulfilled JS Docs.
- Isomorphic unit-test for Vue 2 and 3.
- Configurable global dependencies
window,document, etc. isSupportedfor browsers compatibility check.- Demo rewrites by @anteriovieira.
Migration Guide
BREAKING CHANGE
useTransition - named transition presets are removed. Import them from TransitionPresets instead. #190
import { useTransition } from '@vueuse/core'
useTransition(baseNumber, {
duration: 1000,
transition: 'easeInOutCubic',
})Changed to
import { useTransition, TransitionPresets } from '@vueuse/core'
useTransition(baseNumber, {
duration: 1000,
transition: TransitionPresets.easeInOutCubic,
})
asyncComputed - evaluating state is now passed through arguments instead of returning tuple
import { asyncComputed } from '@vueuse/core'
const [state, evaluating] = asyncComputed(async () => {}, {})Changed to
import { asyncComputed } from '@vueuse/core'
const evaluating = ref(false)
const state = asyncComputed(async () => {}, {}, evaluating)
useEventListener - event target moved from 4th argument to first
import { useEventListener } from '@vueuse/core'
useEventListener('click', handler, undefined, document)Changed to
import { useEventListener } from '@vueuse/core'
useEventListener(document, 'click', handler)
useRefHistory - `flush` now default to `pre`, returned `current` renamed to `source`, hisotry point `value` renamed to `snapshot`
Refer to docs for more details.
useWebWorkerFn - `workerStatus` changed from enum to literal unions
import { useWebWorkerFn, WorkStatus } from '@vueuse/core'
const { workerStatus } = useWebWorkerFn(fn)
workerStatus.value === WorkStatus.runningChanged to
import { useWebWorkerFn } from '@vueuse/core'
const { workerStatus } = useWebWorkerFn(fn)
workerStatus.value === 'RUNNING'
useNow
useNowimport { useNow } from '@vueuse/core'
const now = useNow()Changed to
import { useTimestamp } from '@vueuse/core'
const { timestamp: now, pause, resume } = useTimestamp()
useRaf
useRafNone
useTimeout / useInterval - returned `activated` renamed to `isActive`
None
useRafFn - `start` / `stop` renamed to `resume` / `pause`
None
useXXXObserver - API changes
Refer to docs and types for more details.
Generated changelog
Bug Fixes
- typo: usCounter -> useCounter (#212) (b75fe5d)
- useDebounceFn: types (ad55f48)
- useMouseInElement: crash in firefox (8175ecc)
- useStorage: types, close #197, close #198 (b32ff40)
- vueuse/router: improve api flexibility (a3d03e9)
- prepare scripts (9d057fb)
Features
- ignorableWatch: new function (#209) (ae5dd48)
- useShare: adds isSupported (#180) (882ece0)
- useStorage: support eventFilter and more options (b7fe7f5)
- useTimeoutFn: added startRightNow (#195) (fe057e5)
- useVModel: new function useVModel (9aa2c3a)
- vueuse/router: new package @vueuse/router (1005237)
- watchWithFilter: 4 new watch utilities (#200) (31edda8)
- event filters (#194) (c59a30c)