@@ -51,22 +58,29 @@ const toggle = () => {
Custom function:
{{ customFnNumber.toFixed(2) }}
-
+
+
+
+ Vector: [{{ vector[0].toFixed(2) }}, {{ vector[1].toFixed(2) }}]
+
+
+
diff --git a/packages/core/useTransition/index.md b/packages/core/useTransition/index.md
index fe5a616f0f8..53ddb404bb7 100644
--- a/packages/core/useTransition/index.md
+++ b/packages/core/useTransition/index.md
@@ -8,22 +8,50 @@ Transition between values
## Usage
+For simple transitions, provide a numeric source value to watch. When changed, the output will transition to the new value. If the source changes while a transition is in progress, a new transition will begin from where the previous one was interrupted.
+
```js
+import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
-useTransition(baseNumber, {
+const source = ref(0)
+
+const output = useTransition(source, {
duration: 1000,
transition: TransitionPresets.easeInOutCubic,
})
```
+To synchronize transitions, use an array of numbers. As an example, here is how we could transition between colors.
+
+```js
+const source = ref([0, 0, 0])
+
+const output = useTransition(source)
+
+const color = computed(() => {
+ const [r, g, b] = output.value
+ return `rgb(${r}, ${g}, ${b})`
+})
+```
+
+Transition easing can be customized using cubic bezier curves. Transitions defined this way work the same as [CSS easing functions](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#easing_functions).
+
+```js
+useTransition(source, {
+ transition: [0.75, 0, 0.25, 1],
+})
+```
+
The following transitions are available via the `TransitionPresets` constant.
- [`linear`](https://cubic-bezier.com/#0,0,1,1)
- [`easeInSine`](https://cubic-bezier.com/#.12,0,.39,0)
- [`easeOutSine`](https://cubic-bezier.com/#.61,1,.88,1)
+- [`easeInOutSine`](https://cubic-bezier.com/#.37,0,.63,1)
- [`easeInQuad`](https://cubic-bezier.com/#.11,0,.5,0)
- [`easeOutQuad`](https://cubic-bezier.com/#.5,1,.89,1)
+- [`easeInOutQuad`](https://cubic-bezier.com/#.45,0,.55,1)
- [`easeInCubic`](https://cubic-bezier.com/#.32,0,.67,0)
- [`easeOutCubic`](https://cubic-bezier.com/#.33,1,.68,1)
- [`easeInOutCubic`](https://cubic-bezier.com/#.65,0,.35,1)
@@ -39,19 +67,10 @@ The following transitions are available via the `TransitionPresets` constant.
- [`easeInCirc`](https://cubic-bezier.com/#.55,0,1,.45)
- [`easeOutCirc`](https://cubic-bezier.com/#0,.55,.45,1)
- [`easeInOutCirc`](https://cubic-bezier.com/#.85,0,.15,1)
-- [`easeInBack`](https://cubic-bezier.com/#0.12,0,0.39,0)
+- [`easeInBack`](https://cubic-bezier.com/#.36,0,.66,-.56)
- [`easeOutBack`](https://cubic-bezier.com/#.34,1.56,.64,1)
- [`easeInOutBack`](https://cubic-bezier.com/#.68,-.6,.32,1.6)
-Custom transitions can be defined using cubic bezier curves. Transitions defined this way work the same as [CSS easing functions](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function).
-
-```js
-useTransition(baseNumber, {
- duration: 1000,
- transition: [0.75, 0, 0.25, 1],
-})
-```
-
For more complex transitions, a custom function can be provided.
```js
@@ -63,18 +82,16 @@ const easeOutElastic = (n) => {
: (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}
-useTransition(baseNumber, {
- duration: 1000,
+useTransition(source, {
transition: easeOutElastic,
})
```
-To choreograph behavior around a transition, define `onStarted` or `onFinished` callbacks.
+To control when a transition starts, set a `delay` value. To choreograph behavior around a transition, define `onStarted` or `onFinished` callbacks.
```js
-useTransition(baseNumber, {
- duration: 1000,
- transition: easeOutElastic,
+useTransition(source, {
+ delay: 1000,
onStarted() {
// called after the transition starts
},
@@ -84,6 +101,7 @@ useTransition(baseNumber, {
})
```
+To temporarily stop transitioning, define a boolean `disabled` property. Be aware, this is not the same a `duration` of `0`. Disabled transitions track the source value **_synchronously_**. They do not respect a `delay`, and do not fire `onStarted` or `onFinished` callbacks.
## Type Declarations
@@ -100,10 +118,30 @@ declare type EasingFunction = (n: number) => number
/**
* Transition options
*/
-interface TransitionOptions {
+export declare type TransitionOptions = {
+ /**
+ * Milliseconds to wait before starting transition
+ */
+ delay?: MaybeRef
+ /**
+ * Disables the transition
+ */
+ disabled?: MaybeRef
+ /**
+ * Transition duration in milliseconds
+ */
duration?: MaybeRef
- onFinished?: () => unknown
- onStarted?: () => unknown
+ /**
+ * Callback to execute after transition finishes
+ */
+ onFinished?: () => void
+ /**
+ * Callback to execute after transition starts
+ */
+ onStarted?: () => void
+ /**
+ * Easing function or cubic bezier points for calculating transition values
+ */
transition?: MaybeRef
}
/**
@@ -111,18 +149,26 @@ interface TransitionOptions {
*
* @see https://easings.net
*/
-export declare const TransitionPresets: Record
-/**
- * Transition between values.
- *
- * @see https://vueuse.org/useTransition
- * @param source
- * @param options
- */
+export declare const TransitionPresets: Record<
+ string,
+ CubicBezierPoints | EasingFunction
+>
export declare function useTransition(
source: Ref,
options?: TransitionOptions
-): Ref
+): ComputedRef
+export declare function useTransition[]>(
+ source: [...T],
+ options?: TransitionOptions
+): ComputedRef<
+ {
+ [K in keyof T]: number
+ }
+>
+export declare function useTransition>(
+ source: T,
+ options?: TransitionOptions
+): ComputedRef
export {}
```
diff --git a/packages/core/useTransition/index.test.ts b/packages/core/useTransition/index.test.ts
index 4394bb31f6a..8e7e08cb242 100644
--- a/packages/core/useTransition/index.test.ts
+++ b/packages/core/useTransition/index.test.ts
@@ -1,146 +1,230 @@
-import { nextTick, ref } from 'vue-demi'
import { promiseTimeout } from '@vueuse/shared'
-import { useTransition, TransitionPresets } from '.'
+import { ref } from 'vue-demi'
+import { useTransition } from '.'
+
+const expectBetween = (val: number, floor: number, ceiling: number) => {
+ expect(val).toBeGreaterThan(floor)
+ expect(val).toBeLessThan(ceiling)
+}
describe('useTransition', () => {
- it('transitions between values', async() => {
- const baseValue = ref(0)
+ it('transitions between numbers', async() => {
+ const source = ref(0)
+ const transition = useTransition(source, { duration: 100 })
- const transitionedValue = useTransition(baseValue, {
- duration: 80,
- transition: [0, 0, 1, 1], // a simple linear transition
- })
+ expect(transition.value).toBe(0)
+
+ source.value = 1
+
+ await promiseTimeout(50)
+ expectBetween(transition.value, 0, 1)
+
+ await promiseTimeout(100)
+ expect(transition.value).toBe(1)
+ })
+
+ it('transitions between vectors', async() => {
+ const source = ref([0, 0])
+ const transition = useTransition(source, { duration: 100 })
- // both values should start at zero
- expect(baseValue.value).toBe(0)
- expect(transitionedValue.value).toBe(0)
+ expect(transition.value).toEqual([0, 0])
- // changing the base value should start the transition
- baseValue.value = 1
+ source.value = [1, 1]
- // half way through the transition the base value should be 1,
- // and the transitioned value should be approximately 0.5
await promiseTimeout(50)
- expect(baseValue.value).toBe(1)
- expect(transitionedValue.value > 0 && transitionedValue.value < 1).toBe(true)
+ expectBetween(transition.value[0], 0, 1)
+ expectBetween(transition.value[1], 0, 1)
- // once the transition is complete, both values should be 1
await promiseTimeout(100)
- expect(baseValue.value).toBe(1)
- expect(transitionedValue.value).toBe(1)
+ expect(transition.value[0]).toBe(1)
+ expect(transition.value[1]).toBe(1)
})
- it('exposes named presets', async() => {
- const baseValue = ref(0)
+ it('supports cubic bezier curves', async() => {
+ const source = ref(0)
+
+ // https://cubic-bezier.com/#0,2,0,1
+ const easeOutBack = useTransition(source, {
+ duration: 100,
+ transition: [0, 2, 0, 1],
+ })
+
+ // https://cubic-bezier.com/#1,0,1,-1
+ const easeInBack = useTransition(source, {
+ duration: 100,
+ transition: [1, 0, 1, -1],
+ })
+
+ source.value = 1
+
+ await promiseTimeout(50)
+ expectBetween(easeOutBack.value, 1, 2)
+ expectBetween(easeInBack.value, -1, 0)
- const transitionedValue = useTransition(baseValue, {
- duration: 80,
- transition: TransitionPresets.linear,
+ await promiseTimeout(100)
+ expect(easeOutBack.value).toBe(1)
+ expect(easeInBack.value).toBe(1)
+ })
+
+ it('supports custom easing functions', async() => {
+ const source = ref(0)
+ const linear = jest.fn(n => n)
+ const transition = useTransition(source, {
+ duration: 100,
+ transition: linear,
})
- baseValue.value = 1
+ expect(linear).not.toHaveBeenCalled()
+
+ source.value = 1
await promiseTimeout(50)
- expect(transitionedValue.value > 0 && transitionedValue.value < 1).toBe(true)
+ expect(linear).toHaveBeenCalled()
+ expectBetween(transition.value, 0, 1)
await promiseTimeout(100)
- expect(transitionedValue.value).toBe(1)
+ expect(transition.value).toBe(1)
})
- it('supports custom function transitions', async() => {
- const baseValue = ref(0)
+ it('supports delayed transitions', async() => {
+ const source = ref(0)
- const transitionedValue = useTransition(baseValue, {
- duration: 80,
- transition: n => n,
+ const transition = useTransition(source, {
+ delay: 100,
+ duration: 100,
})
- baseValue.value = 1
+ source.value = 1
await promiseTimeout(50)
- expect(transitionedValue.value > 0 && transitionedValue.value < 1).toBe(true)
+ expect(transition.value).toBe(0)
await promiseTimeout(100)
- expect(transitionedValue.value).toBe(1)
+ expectBetween(transition.value, 0, 1)
})
it('supports dynamic transitions', async() => {
- const linear = jest.fn(n => n)
- const easeInQuad = jest.fn(n => n * n)
- const baseValue = ref(0)
- const transition = ref(linear)
+ const source = ref(0)
+ const first = jest.fn(n => n)
+ const second = jest.fn(n => n)
+ const easingFn = ref(first)
- useTransition(baseValue, {
+ useTransition(source, {
duration: 100,
- transition,
+ transition: easingFn,
})
- expect(linear).not.toHaveBeenCalled()
- expect(easeInQuad).not.toHaveBeenCalled()
+ expect(first).not.toHaveBeenCalled()
+ expect(second).not.toHaveBeenCalled()
- baseValue.value++
- await nextTick()
+ source.value = 1
- expect(linear).toHaveBeenCalled()
- expect(easeInQuad).not.toHaveBeenCalled()
+ await promiseTimeout(50)
+ expect(first).toHaveBeenCalled()
+ expect(second).not.toHaveBeenCalled()
+
+ first.mockReset()
+ second.mockReset()
- transition.value = easeInQuad
- baseValue.value++
- await nextTick()
+ easingFn.value = second
+ source.value = 2
- expect(easeInQuad).toHaveBeenCalled()
+ await promiseTimeout(100)
+ expect(first).not.toHaveBeenCalled()
+ expect(second).toHaveBeenCalled()
})
- it('support dynamic transition durations', async() => {
- const baseValue = ref(0)
+ it('supports dynamic durations', async() => {
+ const source = ref(0)
const duration = ref(100)
+ const transition = useTransition(source, { duration })
- const transitionedValue = useTransition(baseValue, {
- duration,
- transition: n => n,
- })
+ source.value = 1
- // first transition should take 100ms
- baseValue.value = 1
+ await promiseTimeout(50)
+ expectBetween(transition.value, 0, 1)
- await promiseTimeout(150)
- expect(transitionedValue.value).toBe(1)
+ await promiseTimeout(100)
+ expect(transition.value).toBe(1)
- // second transition should take 200ms
duration.value = 200
- baseValue.value = 2
+ source.value = 2
await promiseTimeout(150)
- expect(transitionedValue.value < 2).toBe(true)
+ expectBetween(transition.value, 1, 2)
await promiseTimeout(100)
- expect(transitionedValue.value).toBe(2)
+ expect(transition.value).toBe(2)
})
- it('calls onStarted and onFinished callbacks', async() => {
+ it('fires onStarted and onFinished callbacks', async() => {
+ const source = ref(0)
const onStarted = jest.fn()
const onFinished = jest.fn()
- const baseValue = ref(0)
-
- useTransition(baseValue, {
+ useTransition(source, {
duration: 100,
- onFinished,
onStarted,
- transition: n => n,
+ onFinished,
})
expect(onStarted).not.toHaveBeenCalled()
expect(onFinished).not.toHaveBeenCalled()
- baseValue.value = 1
- await nextTick()
+ source.value = 1
+ await promiseTimeout(50)
expect(onStarted).toHaveBeenCalled()
expect(onFinished).not.toHaveBeenCalled()
+ onStarted.mockReset()
+ onFinished.mockReset()
+
+ await promiseTimeout(100)
+ expect(onStarted).not.toHaveBeenCalled()
+ expect(onFinished).toHaveBeenCalled()
+ })
+
+ it('clears pending transitions before starting a new one', async() => {
+ const source = ref(0)
+ const onStarted = jest.fn()
+ const onFinished = jest.fn()
+
+ useTransition(source, {
+ delay: 100,
+ duration: 100,
+ onFinished,
+ onStarted,
+ })
+
+ await promiseTimeout(150)
+ expect(onStarted).not.toHaveBeenCalled()
+ source.value = 1
+ await promiseTimeout(50)
+ source.value = 2
+ await promiseTimeout(250)
+ expect(onStarted).toHaveBeenCalledTimes(1)
+ expect(onFinished).toHaveBeenCalledTimes(1)
+ })
+
+ it('can be disabled for sychronous changes', async() => {
+ const onStarted = jest.fn()
+ const disabled = ref(false)
+ const source = ref(0)
+
+ const transition = useTransition(source, {
+ disabled,
+ duration: 100,
+ onStarted,
+ })
+
+ disabled.value = true
+ source.value = 1
+
+ expect(transition.value).toBe(1)
await promiseTimeout(150)
- expect(onStarted.mock.calls.length).toBe(1)
- expect(onFinished.mock.calls.length).toBe(1)
+ expect(onStarted).not.toHaveBeenCalled()
+ disabled.value = false
+ expect(transition.value).toBe(1)
})
})
diff --git a/packages/core/useTransition/index.ts b/packages/core/useTransition/index.ts
index 5154b02af6b..610b8801962 100644
--- a/packages/core/useTransition/index.ts
+++ b/packages/core/useTransition/index.ts
@@ -1,6 +1,6 @@
+import { computed, ComputedRef, ref, Ref, unref, watch } from 'vue-demi'
+import { clamp, identity as linear, isFunction, isNumber, MaybeRef, noop, useTimeoutFn } from '@vueuse/shared'
import { useRafFn } from '../useRafFn'
-import { computed, Ref, ref, unref, watch } from 'vue-demi'
-import { clamp, isFunction, MaybeRef, noop } from '@vueuse/shared'
/**
* Cubic bezier points
@@ -15,40 +15,36 @@ type EasingFunction = (n: number) => number
/**
* Transition options
*/
-interface TransitionOptions {
+export type TransitionOptions = {
+ /**
+ * Milliseconds to wait before starting transition
+ */
+ delay?: MaybeRef
+
+ /**
+ * Disables the transition
+ */
+ disabled?: MaybeRef
+
+ /**
+ * Transition duration in milliseconds
+ */
duration?: MaybeRef
- onFinished?: () => unknown
- onStarted?: () => unknown
- transition?: MaybeRef
-}
-
-/**
- * Create an easing function from cubic bezier points.
- */
-function createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction {
- const a = (a1: number, a2: number) => 1 - 3 * a2 + 3 * a1
- const b = (a1: number, a2: number) => 3 * a2 - 6 * a1
- const c = (a1: number) => 3 * a1
-
- const calcBezier = (t: number, a1: number, a2: number) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t
-
- const getSlope = (t: number, a1: number, a2: number) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1)
- const getTforX = (x: number) => {
- let aGuessT = x
-
- for (let i = 0; i < 4; ++i) {
- const currentSlope = getSlope(aGuessT, p0, p2)
- if (currentSlope === 0)
- return aGuessT
- const currentX = calcBezier(aGuessT, p0, p2) - x
- aGuessT -= currentX / currentSlope
- }
+ /**
+ * Callback to execute after transition finishes
+ */
+ onFinished?: () => void
- return aGuessT
- }
+ /**
+ * Callback to execute after transition starts
+ */
+ onStarted?: () => void
- return (x: number) => p0 === p1 && p2 === p3 ? x : calcBezier(getTforX(x), p1, p3)
+ /**
+ * Easing function or cubic bezier points for calculating transition values
+ */
+ transition?: MaybeRef
}
/**
@@ -56,12 +52,14 @@ function createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFuncti
*
* @see https://easings.net
*/
-export const TransitionPresets: Record = {
- linear: [0, 0, 1, 1],
+export const TransitionPresets: Record = {
+ linear,
easeInSine: [0.12, 0, 0.39, 0],
easeOutSine: [0.61, 1, 0.88, 1],
+ easeInOutSine: [0.37, 0, 0.63, 1],
easeInQuad: [0.11, 0, 0.5, 0],
easeOutQuad: [0.5, 1, 0.89, 1],
+ easeInOutQuad: [0.45, 0, 0.55, 1],
easeInCubic: [0.32, 0, 0.67, 0],
easeOutCubic: [0.33, 1, 0.68, 1],
easeInOutCubic: [0.65, 0, 0.35, 1],
@@ -82,6 +80,44 @@ export const TransitionPresets: Record = {
easeInOutBack: [0.68, -0.6, 0.32, 1.6],
}
+/**
+ * Create an easing function from cubic bezier points.
+ */
+function createEasingFunction([p0, p1, p2, p3]: CubicBezierPoints): EasingFunction {
+ const a = (a1: number, a2: number) => 1 - 3 * a2 + 3 * a1
+ const b = (a1: number, a2: number) => 3 * a2 - 6 * a1
+ const c = (a1: number) => 3 * a1
+
+ const calcBezier = (t: number, a1: number, a2: number) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t
+
+ const getSlope = (t: number, a1: number, a2: number) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1)
+
+ const getTforX = (x: number) => {
+ let aGuessT = x
+
+ for (let i = 0; i < 4; ++i) {
+ const currentSlope = getSlope(aGuessT, p0, p2)
+ if (currentSlope === 0)
+ return aGuessT
+ const currentX = calcBezier(aGuessT, p0, p2) - x
+ aGuessT -= currentX / currentSlope
+ }
+
+ return aGuessT
+ }
+
+ return (x: number) => p0 === p1 && p2 === p3 ? x : calcBezier(getTforX(x), p1, p3)
+}
+
+// option 1: reactive number
+export function useTransition(source: Ref, options?: TransitionOptions): ComputedRef
+
+// option 2: static array of possibly reactive numbers
+export function useTransition[]>(source: [...T], options?: TransitionOptions): ComputedRef<{ [K in keyof T]: number }>
+
+// option 3: reactive array of numbers
+export function useTransition>(source: T, options?: TransitionOptions): ComputedRef
+
/**
* Transition between values.
*
@@ -89,32 +125,50 @@ export const TransitionPresets: Record = {
* @param source
* @param options
*/
-export function useTransition(source: Ref, options: TransitionOptions = {}) {
+export function useTransition(
+ source: Ref | MaybeRef[],
+ options: TransitionOptions = {},
+): ComputedRef {
const {
- duration = 500,
+ delay = 0,
+ disabled = false,
+ duration = 1000,
onFinished = noop,
onStarted = noop,
- transition = (n: number) => n,
+ transition = linear,
} = options
- const output = ref(source.value)
-
+ // current easing function
const currentTransition = computed(() => {
const t = unref(transition)
return isFunction(t) ? t : createEasingFunction(t)
})
- let currentDuration = 0
- let diff = 0
- let endAt = 0
- let startAt = 0
- let startValue = 0
+ // raw source value
+ const sourceValue = computed(() => {
+ const s = unref(source)
+ return isNumber(s) ? s : s.map(unref) as number[]
+ })
+
+ // normalized source vector
+ const sourceVector = computed(() => isNumber(sourceValue.value) ? [sourceValue.value] : sourceValue.value)
+ // transitioned output vector
+ const outputVector = ref(sourceVector.value.slice(0))
+
+ // current transition values
+ let currentDuration: number
+ let diffVector: number[]
+ let endAt: number
+ let startAt: number
+ let startVector: number[]
+
+ // transition loop
const { resume, pause } = useRafFn(() => {
const now = Date.now()
const progress = clamp(1 - ((endAt - now) / currentDuration), 0, 1)
- output.value = startValue + (diff * currentTransition.value(progress))
+ outputVector.value = startVector.map((val, i) => val + ((diffVector[i] ?? 0) * currentTransition.value(progress)))
if (progress >= 1) {
pause()
@@ -122,18 +176,34 @@ export function useTransition(source: Ref, options: TransitionOptions =
}
}, { immediate: false })
- watch(source, () => {
+ // start the animation loop when source vector changes
+ const start = () => {
pause()
currentDuration = unref(duration)
- diff = source.value - output.value
- startValue = output.value
+ diffVector = outputVector.value.map((n, i) => (sourceVector.value[i] ?? 0) - (outputVector.value[i] ?? 0))
+ startVector = outputVector.value.slice(0)
startAt = Date.now()
endAt = startAt + currentDuration
resume()
onStarted()
- })
+ }
+
+ const timeout = useTimeoutFn(start, delay, { immediate: false })
- return output
+ watch(sourceVector, () => {
+ if (unref(disabled)) {
+ outputVector.value = sourceVector.value.slice(0)
+ }
+ else {
+ if (unref(delay) <= 0) start()
+ else timeout.start()
+ }
+ }, { deep: true })
+
+ return computed(() => {
+ const targetVector = unref(disabled) ? sourceVector : outputVector
+ return isNumber(sourceValue.value) ? targetVector.value[0] : targetVector.value
+ })
}
diff --git a/packages/core/useUserMedia/index.md b/packages/core/useUserMedia/index.md
index 5c094e540cf..cd15a754adb 100644
--- a/packages/core/useUserMedia/index.md
+++ b/packages/core/useUserMedia/index.md
@@ -91,9 +91,7 @@ export interface UseUserMediaOptions extends ConfigurableNavigator {
* @see https://vueuse.org/useUserMedia
* @param options
*/
-export declare function useUserMedia(
- options?: UseUserMediaOptions
-): {
+export declare function useUserMedia(options?: UseUserMediaOptions): {
isSupported: boolean
stream: Ref
start: () => Promise
@@ -104,6 +102,7 @@ export declare function useUserMedia(
enabled: Ref
autoSwitch: Ref
}
+export declare type UseUserMediaReturn = ReturnType
```
## Source
diff --git a/packages/core/useUserMedia/index.ts b/packages/core/useUserMedia/index.ts
index 0c733d2b171..f1b2af38475 100644
--- a/packages/core/useUserMedia/index.ts
+++ b/packages/core/useUserMedia/index.ts
@@ -126,3 +126,5 @@ export function useUserMedia(options: UseUserMediaOptions = {}) {
autoSwitch,
}
}
+
+export type UseUserMediaReturn = ReturnType
diff --git a/packages/core/useWebSocket/index.md b/packages/core/useWebSocket/index.md
index 35984cfe513..0ddb8bd206d 100644
--- a/packages/core/useWebSocket/index.md
+++ b/packages/core/useWebSocket/index.md
@@ -18,7 +18,7 @@ See the [Type Declarations](#type-declarations) for more options.
### Immediate
-Auto connect (disabled by default, will be enabled by default in the future).
+Auto connect (enabled by default).
This will call `open()` automatically for you and you don't need to call it by yourself.
@@ -128,7 +128,7 @@ export interface WebSocketOptions {
/**
* Automatically open a connection
*
- * @default false
+ * @default true
*/
immediate?: boolean
}
diff --git a/packages/core/useWebSocket/index.ts b/packages/core/useWebSocket/index.ts
index 92e0f4b9d03..8439432eccd 100644
--- a/packages/core/useWebSocket/index.ts
+++ b/packages/core/useWebSocket/index.ts
@@ -59,7 +59,7 @@ export interface WebSocketOptions {
/**
* Automatically open a connection
*
- * @default false
+ * @default true
*/
immediate?: boolean
}
@@ -123,6 +123,7 @@ export function useWebSocket(
onDisconnected,
onError,
onMessage,
+ immediate = true,
} = options
const data: Ref = ref(null)
@@ -213,13 +214,17 @@ export function useWebSocket(
interval = 1000,
} = resolveNestedOptions(options.heartbeat)
- const { pause, resume } = useIntervalFn(() => send(message, false), interval, false)
+ const { pause, resume } = useIntervalFn(
+ () => send(message, false),
+ interval,
+ { immediate: false },
+ )
heartbeatPause = pause
heartbeatResume = resume
}
- if (options.immediate) _init()
+ if (immediate) _init()
const open = () => {
close()
diff --git a/packages/core/useWebWorker/index.md b/packages/core/useWebWorker/index.md
index 3d5b2a974db..98e1947848e 100644
--- a/packages/core/useWebWorker/index.md
+++ b/packages/core/useWebWorker/index.md
@@ -55,6 +55,7 @@ export declare function useWebWorker(
terminate: () => void
worker: Ref
}
+export declare type UseWebWorkerReturn = ReturnType
```
## Source
diff --git a/packages/core/useWebWorker/index.ts b/packages/core/useWebWorker/index.ts
index 9e794ac2233..c96c87389a3 100644
--- a/packages/core/useWebWorker/index.ts
+++ b/packages/core/useWebWorker/index.ts
@@ -59,3 +59,5 @@ export function useWebWorker(
worker,
}
}
+
+export type UseWebWorkerReturn = ReturnType
diff --git a/packages/core/useWebWorkerFn/demo.vue b/packages/core/useWebWorkerFn/demo.vue
index 707daab834a..b749578b03e 100644
--- a/packages/core/useWebWorkerFn/demo.vue
+++ b/packages/core/useWebWorkerFn/demo.vue
@@ -1,7 +1,6 @@
@@ -32,12 +31,6 @@ const signIn = () => auth().signInWithPopup(new GoogleAuthProvider())
```
-Using a different firebase auth instance
-```ts
-import firebase from 'firebase'
-const { isAuthenticated, user } = useAuth(firebase.auth) // or userAuth(firebase.auth())
-```
-
## Type Declarations
@@ -47,7 +40,7 @@ export interface FirebaseAuthOptions {
user: Ref
}
export declare function useAuth(
- authInstance?: typeof firebase.auth | firebase.auth.Auth
+ authInstance: typeof firebase.auth | firebase.auth.Auth
): {
isAuthenticated: ComputedRef
user: Ref<{
diff --git a/packages/firebase/useAuth/index.ts b/packages/firebase/useAuth/index.ts
index 4ea18c7369f..e71c3422b39 100644
--- a/packages/firebase/useAuth/index.ts
+++ b/packages/firebase/useAuth/index.ts
@@ -1,23 +1,18 @@
import { computed, ComputedRef, ref, Ref } from 'vue-demi'
-import firebase from 'firebase/app'
+import type firebase from 'firebase/app'
export interface FirebaseAuthOptions {
isAuthenticated: ComputedRef
user: Ref
}
-export function useAuth(authInstance?: typeof firebase.auth | firebase.auth.Auth) {
+export function useAuth(authInstance: typeof firebase.auth | firebase.auth.Auth) {
let auth: firebase.auth.Auth
- if (authInstance) {
- if (authInstance instanceof Function)
- auth = authInstance()
- else
- auth = authInstance
- }
- else {
- auth = firebase.auth()
- }
+ if (authInstance instanceof Function)
+ auth = authInstance()
+ else
+ auth = authInstance
const user = ref(auth.currentUser)
const isAuthenticated = computed(() => !!user.value)
diff --git a/packages/firebase/useFirestore/index.md b/packages/firebase/useFirestore/index.md
index 957bf8e7b0b..771f8882f28 100644
--- a/packages/firebase/useFirestore/index.md
+++ b/packages/firebase/useFirestore/index.md
@@ -11,7 +11,7 @@ Reactive [Firestore](https://firebase.google.com/docs/firestore) binding. Making
```js {7,9}
import firebase from 'firebase/app'
import 'firebase/firestore'
-import { useFirestore } from '@vueuse/firebase'
+import { useFirestore } from '@vueuse/firebase/useFirestore'
const db = firebase.initializeApp({ projectId: 'MY PROJECT ID' }).firestore()
@@ -34,7 +34,7 @@ or use `createGlobalState` from the core package
```js
// store.js
import { createGlobalState } from '@vueuse/core'
-import { useFirestore } from '@vueuse/firebase'
+import { useFirestore } from '@vueuse/firebase/useFirestore'
export const useTodos = createGlobalState(
() => useFirestore(db.collection('todos')),
diff --git a/packages/firebase/useFirestore/index.ts b/packages/firebase/useFirestore/index.ts
index c2188a0fa3c..74a81e8b46b 100644
--- a/packages/firebase/useFirestore/index.ts
+++ b/packages/firebase/useFirestore/index.ts
@@ -68,6 +68,7 @@ export function useFirestore(
options: FirestoreOptions = {},
) {
const {
+ // eslint-disable-next-line no-console
errorHandler = (err: Error) => console.error(err),
autoDispose = true,
} = options
diff --git a/packages/firebase/useRTDB/index.md b/packages/firebase/useRTDB/index.md
index b962884e1a4..9161e79c141 100644
--- a/packages/firebase/useRTDB/index.md
+++ b/packages/firebase/useRTDB/index.md
@@ -11,7 +11,7 @@ Reactive [Firebase Realtime Database](https://firebase.google.com/docs/database)
```js
import firebase from 'firebase/app'
import 'firebase/database'
-import { useRTDB } from '@vueuse/firebase'
+import { useRTDB } from '@vueuse/firebase/useRTDB'
const db = firebase
.initializeApp({ databaseURL: 'https://MY-DATABASE.firebaseio.com' })
@@ -32,7 +32,7 @@ or use `createGlobalState` from the core package
```js
// store.js
import { createGlobalState } from '@vueuse/core'
-import { useRTDB } from '@vueuse/firebase'
+import { useRTDB } from '@vueuse/firebase/useRTDB'
export const useTodos = createGlobalState(
() => useRTDB(db.ref('todos')),
diff --git a/packages/functions.md b/packages/functions.md
index c9be0751794..9952bb51131 100644
--- a/packages/functions.md
+++ b/packages/functions.md
@@ -60,7 +60,6 @@
- [`onKeyStroke`](https://vueuse.org/core/onKeyStroke/) โ listen for keyboard key being stroked
- [`onStartTyping`](https://vueuse.org/core/onStartTyping/) โ fires when users start typing on non-editable elements
- [`useBattery`](https://vueuse.org/core/useBattery/) โ reactive [Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API)
- - [`useDeviceLight`](https://vueuse.org/core/useDeviceLight/) โ reactive [DeviceLightEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent)
- [`useDeviceMotion`](https://vueuse.org/core/useDeviceMotion/) โ reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent)
- [`useDeviceOrientation`](https://vueuse.org/core/useDeviceOrientation/) โ reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
- [`useDevicePixelRatio`](https://vueuse.org/core/useDevicePixelRatio/) โ reactively track [`window.devicePixelRatio`](https://developer.mozilla.org/ru/docs/Web/API/Window/devicePixelRatio)
diff --git a/packages/guide/best-practice.md b/packages/guide/best-practice.md
new file mode 100644
index 00000000000..22a5d6d0531
--- /dev/null
+++ b/packages/guide/best-practice.md
@@ -0,0 +1,30 @@
+# Best Practice
+
+### Destructuring
+
+Most of the functions in VueUse returns an **object of refs** that you can use [ES6's object destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax to take what you need. For example:
+
+```ts
+import { useMouse } from '@vueuse/core'
+
+// "x" and "y" are refs
+const { x, y } = useMouse()
+
+console.log(x.value)
+
+const mouse = useMouse()
+
+console.log(mouse.x.value)
+```
+
+If you prefer to use them as object properties style, you can unwrap the refs by using `reactive()`. For example:
+
+```ts
+import { reactive } from 'vue'
+import { useMouse } from '@vueuse/core'
+
+const mouse = reactive(useMouse())
+
+// "x" and "y" will be auto unwrapped, no `.value` needed
+console.log(mouse.x)
+```
diff --git a/packages/guide/components.md b/packages/guide/components.md
new file mode 100644
index 00000000000..9d3bcd21d94
--- /dev/null
+++ b/packages/guide/components.md
@@ -0,0 +1,67 @@
+# Components
+
+In v5.0, we introduced a new package `@vueuse/components` providing renderless component style usage of composable functions.
+
+For example of `onClickOutside`, instead of
+
+```html
+
+
+
+
+ Click Outside of Me
+
+
+```
+
+You can now use it in the component way:
+
+```html
+
+
+
+
+
+ Click Outside of Me
+
+
+
+```
+
+Similarly, you can also access return values with `v-slot`:
+
+```html
+
+ x: {{ x }}
+ y: {{ y }}
+
+```
+
+```html
+
+
+
+```
+
+## Install
+
+```bash
+$ npm i @vueuse/core @vueuse/components
+```
+
+Refer to each functions docuemantions for the detailed usage of component style.
diff --git a/packages/guide.md b/packages/guide/config.md
similarity index 56%
rename from packages/guide.md
rename to packages/guide/config.md
index 1e68ebbcdf5..f0ae87c8a6f 100644
--- a/packages/guide.md
+++ b/packages/guide/config.md
@@ -1,96 +1,4 @@
----
-sidebar: 'auto'
----
-
-# Get Started
-
-VueUse is a collection of utility functions based on [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html). We assume you are already familiar with the basic ideas of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) before you continue.
-
-## Installation
-
-> ๐ฉ From v4.0, it works for Vue 2 & 3 **within a single package** by the power of [Vue Demi](https://github.com/antfu/vue-demi)!
-
-### NPM
-
-```bash
-npm i @vueuse/core # yarn add @vueuse/core
-```
-
-Vue 3 Demo: [Vite](https://github.com/antfu/vite-vueuse-starter), [Webpack](https://github.com/vueuse/vueuse-next-example) / Vue 2 Demo: [Vue CLI](https://github.com/vueuse/vueuse-vue2-example)
-
-### CDN
-
-```html
-
-
-```
-
-It will be exposed to global as `window.VueUse`
-
-
-## Usage Example
-
-Simply importing the functions you need from `@vueuse/core`
-
-```ts
-import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'
-
-export default {
- setup() {
- // tracks mouse position
- const { x, y } = useMouse()
-
- // is user prefers dark theme
- const isDark = usePreferredDark()
-
- // persist state in localStorage
- const store = useLocalStorage(
- 'my-storage',
- {
- name: 'Apple',
- color: 'red',
- },
- )
-
- return { x, y, isDark, store }
- }
-})
-```
-
-Refer to [functions list](./functions) for more details.
-
-## Best Practice
-
-### Destructuring
-
-Most of the functions in VueUse returns an **object of refs** that you can use [ES6's object destructure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) syntax to take what you need. For example:
-
-```ts
-import { useMouse } from '@vueuse/core'
-
-// "x" and "y" are refs
-const { x, y } = useMouse()
-
-console.log(x.value)
-
-const mouse = useMouse()
-
-console.log(mouse.x.value)
-```
-
-If you prefer to use them as object properties style, you can unwrap the refs by using `reactive()`. For example:
-
-```ts
-import { reactive } from 'vue'
-import { useMouse } from '@vueuse/core'
-
-const mouse = reactive(useMouse())
-
-// "x" and "y" will be auto unwrapped, no `.value` needed
-console.log(mouse.x)
-```
-
-## Configurations
+# Configurations
These show the general configurations for most of the functions in VueUse.
diff --git a/packages/guide/index.md b/packages/guide/index.md
new file mode 100644
index 00000000000..83d3f30b7fe
--- /dev/null
+++ b/packages/guide/index.md
@@ -0,0 +1,56 @@
+# Get Started
+
+VueUse is a collection of utility functions based on [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html). We assume you are already familiar with the basic ideas of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) before you continue.
+
+## Installation
+
+> ๐ฉ From v4.0, it works for Vue 2 & 3 **within a single package** by the power of [Vue Demi](https://github.com/antfu/vue-demi)!
+
+### NPM
+
+```bash
+npm i @vueuse/core # yarn add @vueuse/core
+```
+
+Vue 3 Demo: [Vite](https://github.com/antfu/vite-vueuse-starter), [Webpack](https://github.com/vueuse/vueuse-next-example) / Vue 2 Demo: [Vue CLI](https://github.com/vueuse/vueuse-vue2-example)
+
+### CDN
+
+```html
+
+
+```
+
+It will be exposed to global as `window.VueUse`
+
+
+## Usage Example
+
+Simply importing the functions you need from `@vueuse/core`
+
+```ts
+import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'
+
+export default {
+ setup() {
+ // tracks mouse position
+ const { x, y } = useMouse()
+
+ // is user prefers dark theme
+ const isDark = usePreferredDark()
+
+ // persist state in localStorage
+ const store = useLocalStorage(
+ 'my-storage',
+ {
+ name: 'Apple',
+ color: 'red',
+ },
+ )
+
+ return { x, y, isDark, store }
+ }
+})
+```
+
+Refer to [functions list](/functions) for more details.
diff --git a/packages/guidelines.md b/packages/guidelines.md
index b5f729fb464..1fc94bdad50 100644
--- a/packages/guidelines.md
+++ b/packages/guidelines.md
@@ -1,56 +1,160 @@
----
-sidebar: auto
----
-
# Guidelines
-Writing good composables can be difficult, so we've created a small set of guidelines you can follow to improve your composables!
+Here are the guidelines for VueUse functions. You could also take them as a reference for authoring your own composable functions or apps.
+
+You can also find some reasons for those design decisions and also some tips for writing composable functions with [Anthony Fu](https://github.com/antfu)'s talk about VueUse:
+
+- [Composable Vue](https://antfu.me/posts/composable-vue-vueday-2021) - at VueDay 2021
+- [ๅฏ็ปๅ็ Vue](https://antfu.me/posts/composable-vue-vueconf-china-2021) - at VueConf China 2021 (in Chinese)
## General
-- Avoid using console logs in VueUse
-- Use configurableWindow (etc.) when using global variables like window to be flexible when working with multi-windows, testing mocks, and SSR.
+
+- Import all Vue APIs from `"vue-demi"`
+- Use `ref` instead `reactive` whenever possible
- Use options object as arguments whenever possible to be more flexible for future extensions.
-- Use `ref` over `reactive` whenever possible
- Use `shallowRef` instead of `ref` when wrapping large amounts of data.
+- Use `configurableWindow` (etc.) when using global variables like `window` to be flexible when working with multi-windows, testing mocks, and SSR.
- When involved with Web APIs that are not yet implemented by the browser widely, also outputs `isSupported` flag
- When using `watch` or `watchEffect` internally, also make the `immediate` and `flush` options configurable whenever possible
- Use `tryOnUnmounted` to clear the side-effects gracefully
+- Avoid using console logs
+Read also: [Best Practice](/guide/best-practice.html)
-## Controls
+## ShallowRef
+
+Use `shallowRef` instead of `ref` when wrapping large amounts of data.
-In VueUse 5.0, we introduced a `controls` option, allowing you to write functions that can return both a single value as well as
-an object with controls.
+```ts
+export function useFetch(url: MaybeRef) {
+ // use `shallowRef` to prevent deep reactivity
+ const data = shallowRef()
+ const error = shallowRef()
-*When to provide a `controls` option*
+ fetch(unref(url))
+ .then(r => r.json())
+ .then(r => data.value = r)
+ .catch(e => error.value = e)
-- If the return value of the function is often used without controls
-- Examples: `useTimestamp`, `useInterval`,
+ /* ... */
+}
+```
+
+## Configurable Globals
+
+When using global variables like `window` or `document`, support `configurableWindow` or `configurableDocument` in the options interface to make the function flexible when for scenarios like multi-windows, testing mocks, and SSR.
+
+Learn more about the implementation: [`_configurable.ts`](https://github.com/vueuse/vueuse/blob/main/packages/core/_configurable.ts)
+
+```ts
+import { ConfigurableWindow, defaultWindow } from '../_configurable'
+
+export function useActiveElement(
+ options: ConfigurableWindow = {}
+) {
+ const {
+ // defaultWindow = isClient ? window : undefined
+ window = defaultWindow
+ } = options
+
+ let el: T
+
+ // skip when in Node.js environment (SSR)
+ if (window) {
+ window.addEventListener('blur', () => {
+ el = window?.document.activeElement
+ }, true)
+ }
+
+ /* ... */
+}
+```
+
+Usage example:
+
+```ts
+// in iframe and bind to the parent window
+useActiveElement({ window: window.parent })
+```
+
+## Watch Options
+
+When using `watch` or `watchEffect` internally, also make the `immediate` and `flush` options configurable whenever possible. For example `debouncedWatch`:
-**Instead of this**
```ts
-const { timestamp, pause, resume } = useTimestamp()
+import { WatchOptions } from 'vue-demi'
+
+// extend the watch options
+export interface DebouncedWatchOptions extends WatchOptions {
+ debounce?: number
+}
+
+export function debouncedWatch(
+ source: any,
+ cb: any,
+ options: DebouncedWatchOptions = {},
+): WatchStopHandle {
+ return watch(
+ source,
+ () => /* ... */,
+ options, // pass watch options
+ )
+}
```
-**Do this**
+## Controls
+
+We use the `controls` option allowing users to use functions with a single return for simple usages, while being able to have more controls and flexibility when needed. Read more: [#362](https://github.com/vueuse/vueuse/pull/362).
+
+#### When to provide a `controls` option
+
+- The function is more commonly used with single `ref` or
+- Examples: `useTimestamp`, `useInterval`,
+
```ts
+// common usage
const timestamp = useTimestamp()
+
+// more controls for flexibility
const { timestamp, pause, resume } = useTimestamp({ controls: true })
```
-*When **not** to provide a `controls` option*
-- If the function is often used without a return value
-- If controls are the primary use of the function
-- Examples: `useRafFn`,
+Refer to `useTimestamp`'s source code for the implementation of proper TypeScript support.
+
+#### When **NOT** to provide a `controls` option
+
+- The function is more commonly used with multiple returns
+- Examples: `useRafFn`, `useRefHistory`,
-**Instead of this**
```ts
-const { pause, resume } = useRafFn(() => {}, { controls: true })
+const { pause, resume } = useRafFn(() => {})
```
-**Do this**
+## `isSupported` Flag
+
+When involved with Web APIs that are not yet implemented by the browser widely, also outputs `isSupported` flag.
+
+For example `useShare`:
+
```ts
-const { pause, resume } = useRafFn(() => {})
+export function useShare(
+ shareOptions: MaybeRef = {},
+ options: ConfigurableNavigator = {}
+) {
+ const { navigator = defaultNavigator } = options
+ const isSupported = navigator && 'canShare' in navigator
+
+ const share = async(overrideOptions) => {
+ if (isSupported) {
+ /* ...implementation */
+ }
+ }
+
+ return {
+ isSupported,
+ share,
+ }
+}
```
## Renderless Components
@@ -58,21 +162,8 @@ const { pause, resume } = useRafFn(() => {})
- Use render functions instead of Vue SFC
- Wrap the props in `reactive` to easily pass them as props to the slot
- Prefer to use the functions options as prop types instead of recreating them yourself
-- Only wrap the slot in an html element if the function needs a target to bind to
-
-**Instead of this**
-```html
-
-
-
-
-
-```
+- Only wrap the slot in an HTML element if the function needs a target to bind to
-**Do this**
```ts
import { defineComponent, reactive } from 'vue-demi'
import { useMouse, MouseOptions } from '@vueuse/core'
@@ -91,7 +182,7 @@ export const UseMouse = defineComponent({
})
```
-Sometimes a function may have multiple parameters, in that case you maybe need to create a new interface to merge all the interfaces
+Sometimes a function may have multiple parameters, in that case, you maybe need to create a new interface to merge all the interfaces
into a single interface for the component props.
```ts
@@ -102,4 +193,4 @@ interface UseTimeAgoComponentOptions extends Omit, 'control
}
export const UseTimeAgo = defineComponent({...})
-```
\ No newline at end of file
+```
diff --git a/packages/integrations/README.md b/packages/integrations/README.md
index aaddbe71b0d..a7db85986b4 100644
--- a/packages/integrations/README.md
+++ b/packages/integrations/README.md
@@ -24,6 +24,17 @@ npm i @vueuse/integrations
+## Tree-shaking
+
+For better tree-shaking result, import functions from submodules, for example:
+
+```ts
+import { useAxios } from '@vueuse/integrations/useAxios'
+
+// Don't
+import { useAxios } from '@vueuse/integrations'
+```
+
## License
[MIT License](https://github.com/vueuse/vueuse/blob/master/LICENSE) ยฉ 2019-PRESENT [Anthony Fu](https://github.com/antfu)
diff --git a/packages/integrations/_readme.stories.tsx b/packages/integrations/_readme.stories.tsx
deleted file mode 100644
index 3f88f54288c..00000000000
--- a/packages/integrations/_readme.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import 'vue-tsx-support/enable-check'
-import { defineDemo } from '../_docs'
-
-defineDemo(
- {
- name: 'README',
- category: '/Integrations',
- docs: require('./README.md'),
- module,
- },
-)
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
index 5b00c16fcb1..d2c2c01d8e4 100644
--- a/packages/integrations/package.json
+++ b/packages/integrations/package.json
@@ -1,6 +1,6 @@
{
"name": "@vueuse/integrations",
- "version": "4.11.2",
+ "version": "5.0.0-beta.8",
"description": "Integration wrappers for utility libraries",
"keywords": [
"vue",
@@ -14,28 +14,49 @@
},
"funding": "https://github.com/sponsors/antfu",
"author": "Anthony Fu",
- "files": [
- "dist"
- ],
"exports": {
".": {
- "import": "./dist/index.esm.js",
- "require": "./dist/index.cjs.js"
+ "import": "./index.esm.js",
+ "require": "./index.cjs.js"
+ },
+ "./*": "./*",
+ "./useAxios": {
+ "import": "./useAxios.esm.js",
+ "require": "./useAxios.cjs.js"
+ },
+ "./useCookies": {
+ "import": "./useCookies.esm.js",
+ "require": "./useCookies.cjs.js"
+ },
+ "./useFocusTrap": {
+ "import": "./useFocusTrap.esm.js",
+ "require": "./useFocusTrap.cjs.js"
+ },
+ "./useJwt": {
+ "import": "./useJwt.esm.js",
+ "require": "./useJwt.cjs.js"
+ },
+ "./useNProgress": {
+ "import": "./useNProgress.esm.js",
+ "require": "./useNProgress.cjs.js"
},
- "./": "./"
+ "./useQRCode": {
+ "import": "./useQRCode.esm.js",
+ "require": "./useQRCode.cjs.js"
+ }
},
- "main": "./dist/index.cjs.js",
- "types": "./dist/index.d.ts",
- "module": "./dist/index.esm.js",
- "unpkg": "./dist/index.iife.min.js",
- "jsdelivr": "./dist/index.iife.min.js",
+ "main": "./index.cjs.js",
+ "types": "./index.d.ts",
+ "module": "./index.esm.js",
+ "unpkg": "./index.iife.min.js",
+ "jsdelivr": "./index.iife.min.js",
"sideEffects": false,
"bugs": {
"url": "https://github.com/vueuse/vueuse/issues"
},
"homepage": "https://github.com/vueuse/vueuse/tree/main/packages/integrations#readme",
"dependencies": {
- "@vueuse/shared": "4.11.2",
+ "@vueuse/shared": "5.0.0-beta.8",
"vue-demi": "*"
},
"optionalDependencies": {
diff --git a/packages/integrations/useAxios/index.md b/packages/integrations/useAxios/index.md
index 427ed73bce0..99e148b83ae 100644
--- a/packages/integrations/useAxios/index.md
+++ b/packages/integrations/useAxios/index.md
@@ -15,7 +15,7 @@ npm i axios
## Usage
```ts
-import { useAxios } from '@vueuse/integrations'
+import { useAxios } from '@vueuse/integrations/useAxios'
const { data, isFinished } = useAxios('/api/posts')
```
@@ -24,7 +24,7 @@ or use an instance of axios
```ts
import axios from 'axios'
-import { useAxios } from '@vueuse/integrations'
+import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api'
@@ -37,7 +37,7 @@ use an instance of axios with config options
```ts
import axios from 'axios'
-import { useAxios } from '@vueuse/integrations'
+import { useAxios } from '@vueuse/integrations/useAxios'
const instance = axios.create({
baseURL: '/api'
@@ -59,14 +59,6 @@ export interface UseAxiosReturn {
* Axios response data
*/
data: Ref
- /**
- * @deprecated use isFinished instead
- */
- finished: Ref
- /**
- * @deprecated use isLoading instead
- */
- loading: Ref
/**
* Indicates if the request has finished
*/
@@ -75,10 +67,6 @@ export interface UseAxiosReturn {
* Indicates if the request is currently loading
*/
isLoading: Ref
- /**
- * @deprecated use aborted instead
- */
- canceled: Ref 
-
+
diff --git a/indexes.json b/indexes.json
index f6da14a443a..42f9d5679ed 100644
--- a/indexes.json
+++ b/indexes.json
@@ -11,6 +11,17 @@
"description": "Collection of essential Vue Composition Utilities",
"dir": "packages/core"
},
+ "components": {
+ "name": "components",
+ "display": "Components",
+ "description": "Renderless components for VueUse",
+ "author": "Jacob Clevenger