matijao/webdev huggingface dataset:
toRef | VueUse

toRef
​
Category
Reactivity
Export Size
159 B
Last Changed
8 months ago
Alias
resolveRef
Related
toValue

Normalize value/ref/getter to ref or computed.

Usage
​
ts
import { toRef } from '@vueuse/core'

const foo = ref('hi')

const a = toRef(0) // Ref<number>
const b = toRef(foo) // Ref<string>
const c = toRef(() => 'hi') // ComputedRef<string>
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
v10.0.0 on 4/14/2023
cb6f9 - fix: improve types overload, close #2925
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
f307f - feat: support two argument overrides from Vue
10e98 - feat!: rename resolveRef to toRef
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.8.0 on 7/6/2022
29fd5 - feat(resolveRef): new function (#1743)
syncRefs | VueUse

syncRefs
​
Category
Reactivity
Export Size
158 B
Last Changed
2 years ago
Related
syncRef

Keep target refs in sync with a source ref

Demo
​

source

Usage
​
ts
import { syncRefs } from '@vueuse/core'

const source = ref('hello')
const target = ref('target')

const stop = syncRefs(source, target)

console.log(target.value) // hello

source.value = 'foo'

console.log(target.value) // foo
Watch options
​

The options for syncRefs are similar to watch's WatchOptions but with different default values.

TypeScript
ts
export interface SyncRefOptions {
  /**
   * Timing for syncing, same as watch's flush option
   *
   * @default 'sync'
   */
  flush?: WatchOptions['flush']
  /**
   * Watch deeply
   *
   * @default false
   */
  deep?: boolean
  /**
   * Sync values immediately
   *
   * @default true
   */
  immediate?: boolean
}

When setting { flush: 'pre' }, the target reference will be updated at the end of the current "tick" before rendering starts.

ts
import { syncRefs } from '@vueuse/core'

const source = ref('hello')
const target = ref('target')

syncRefs(source, target, { flush: 'pre' })

console.log(target.value) // hello

source.value = 'foo'

console.log(target.value) // hello <- still unchanged, because of flush 'pre'

await nextTick()

console.log(target.value) // foo <- changed!
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
Bruno Perel
Changelog
​
No recent changes
reactiveOmit | VueUse

reactiveOmit
​
Category
Reactivity
Export Size
381 B
Last Changed
2 months ago

Reactively omit fields from a reactive object.

Usage
​
Basic Usage
​
ts
import { reactiveOmit } from '@vueuse/core'

const obj = reactive({
  x: 0,
  y: 0,
  elementX: 0,
  elementY: 0,
})

const picked = reactiveOmit(obj, 'x', 'elementX') // { y: number, elementY: number }
Predicate Usage
​
ts
import { reactiveOmit } from '@vueuse/core'

const obj = reactive({
  bar: 'bar',
  baz: 'should be omit',
  foo: 'foo2',
  qux: true,
})

const picked = reactiveOmit(obj, (value, key) => key === 'baz' || value === true)
// { bar: string, foo: string }
Scenarios
​
Selectively passing props to child
​
html
<script setup>
import { reactiveOmit } from '@vueuse/core'

const props = defineProps({
  value: {
    default: 'value',
  },
  color: {
    type: String,
  },
  font: {
    type: String,
  }
})

const childProps = reactiveOmit(props, 'value')
</script>

<template>
  <div>
    <!-- only passes "color" and "font" props to child -->
    <ChildComp v-bind="childProps" />
  </div>
</template>
Source
​

Source • Docs

Contributors
​
Anthony Fu
Doctorwu
丶远方
Brain777777
qiang
Changelog
​
v10.0.0-beta.4 on 4/13/2023
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.2 on 3/28/2023
2e297 - feat: add predicate parameter (#2849)
v8.8.0 on 7/6/2022
80c16 - fix(reactivePick): allow nested keys
dd94d - fix(types): reactiveOmit and reactivePick support array as second arg (#1742)
refDebounced | VueUse

refDebounced
​
Category
Reactivity
Export Size
423 B
Last Changed
8 months ago
Alias
useDebounce
debouncedRef
Related
useThrottleFn

Debounce execution of a ref value.

Demo
​

source

Delay is set to 1000ms for this demo.

Debounced:

Times Updated: 0

Usage
​
js
import { refDebounced } from '@vueuse/core'

const input = ref('foo')
const debounced = refDebounced(input, 1000)

input.value = 'bar'
console.log(debounced.value) // 'foo'

await sleep(1100)

console.log(debounced.value) // 'bar'

You can also pass an optional 3rd parameter including maxWait option. See useDebounceFn for details.

Recommended Reading
​
Debounce vs Throttle: Definitive Visual Guide
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Dominik Klein
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v9.4.0 on 10/25/2022
ce3dc - feat: use MaybeComputedRef for ms (#2337)
reactiveComputed | VueUse

reactiveComputed
​
Category
Reactivity
Export Size
264 B
Last Changed
4 months ago

Computed reactive object. Instead of returning a ref that computed does, reactiveComputed returns a reactive object.

This function uses Proxy

It is NOT supported by IE 11 or below.

Usage
​
ts
import { reactiveComputed } from '@vueuse/core'

const state = reactiveComputed(() => {
  return {
    foo: 'bar',
    bar: 'baz',
  }
})

state.bar // 'baz'
Source
​

Source • Docs

Contributors
​
Anthony Fu
三咲智子 Kevin Deng
qiang
Changelog
​
v10.3.0 on 7/30/2023
17a72 - fix: unwrap reactive type (#3215)
reactifyObject | VueUse

reactifyObject
​
Category
Reactivity
Export Size
305 B
Last Changed
6 months ago

Apply reactify to an object

Usage
​
ts
import { reactifyObject } from '@vueuse/core'

const reactifiedConsole = reactifyObject(console)

const a = ref('42')

reactifiedConsole.log(a) // no longer need `.value`
Source
​

Source • Docs

Contributors
​
Anthony Fu
童欧巴
markthree
Changelog
​
v8.9.3 on 7/14/2022
d484f - feat(reactify)!: enable support for reactive getter by default (#1860)
computedWithControl | VueUse

computedWithControl
​
Category
Reactivity
Export Size
250 B
Last Changed
8 months ago
Alias
controlledComputed
Related
refWithControl

Explicitly define the dependencies of computed.

Usage
​
TypeScript
ts
import { computedWithControl } from '@vueuse/core'
const source = ref('foo')
const counter = ref(0)
const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
)

With this, the changes of counter won't trigger computedRef to update but the source ref does.

ts
console.log(computedRef.value) // 0

counter.value += 1

console.log(computedRef.value) // 0

source.value = 'bar'

console.log(computedRef.value) // 1
Manual Triggering
​

You can also manually trigger the update of the computed by:

ts
const computedRef = computedWithControl(
  () => source.value,
  () => counter.value,
)

computedRef.trigger()

WARNING

Manual triggering only works for Vue 3

Source
​

Source • Docs

Contributors
​
Anthony Fu
sun0day
kongmoumou
Changelog
​
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v8.8.1 on 7/6/2022
a1077 - fix: trigger only work in Vue 3
01fca - feat: support manual triggering
v8.7.5 on 6/19/2022
ab9d3 - fix: source type match vue.watch (#1674)
watchWithFilter | VueUse

watchWithFilter
​
Category
Watch
Export Size
373 B
Last Changed
last year

watch with additional EventFilter control.

Usage
​

Similar to watch, but offering an extra option eventFilter which will be applied to the callback function.

ts
import { debounceFilter, watchWithFilter } from '@vueuse/core'

watchWithFilter(
  source,
  () => { console.log('changed!') }, // callback will be called in 500ms debounced manner
  {
    eventFilter: debounceFilter(500), // throttledFilter, pausabledFilter or custom filters
  },
)
Source
​

Source • Docs

Contributors
​
Anthony Fu
vaakian X
lvjiaxuan
Changelog
​
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchIgnorable | VueUse

watchIgnorable
​
Category
Watch
Export Size
708 B
Last Changed
last year
Alias
ignorableWatch

Ignorable watch

Demo
​

source

Value: 0
UpdateIgnored UpdateReset

Log
Usage
​

Extended watch that returns extra ignoreUpdates(updater) and ignorePrevAsyncUpdates() to ignore particular updates to the source.

ts
import { watchIgnorable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref('foo')

const { stop, ignoreUpdates } = watchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // logs: Changed to bar!

ignoreUpdates(() => {
  source.value = 'foobar'
})
await nextTick() // (nothing happened)

source.value = 'hello'
await nextTick() // logs: Changed to hello!

ignoreUpdates(() => {
  source.value = 'ignored'
})
source.value = 'logged'

await nextTick() // logs: Changed to logged!
Flush timing
​

watchIgnorable accepts the same options as watch and uses the same defaults. So, by default the composable works using flush: 'pre'.

ignorePrevAsyncUpdates
​

This feature is only for async flush 'pre' and 'post'. If flush: 'sync' is used, ignorePrevAsyncUpdates() is a no-op as the watch will trigger immediately after each update to the source. It is still provided for sync flush so the code can be more generic.

ts
import { watchIgnorable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref('foo')

const { ignorePrevAsyncUpdates } = watchIgnorable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // logs: Changed to bar!

source.value = 'good'
source.value = 'by'
ignorePrevAsyncUpdates()

await nextTick() // (nothing happened)

source.value = 'prev'
ignorePrevAsyncUpdates()
source.value = 'after'

await nextTick() // logs: Changed to after!
Recommended Readings
​
Ignorable Watch - by @matias-capeletto
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
lvjiaxuan
webfansplz
Changelog
​
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchDeep | VueUse

watchDeep
​
Category
Watch
Export Size
325 B
Last Changed
7 months ago

Shorthand for watching value with {deep: true}

Usage
​

Similar to watch, but with { deep: true }

ts
import { watchDeep } from '@vueuse/core'

const nestedObject = ref({ foo: { bar: { deep: 5 } } })

watchDeep(nestedObject, (obj) => {
  console.log(updated)
})

onMounted(() => {
  nestedObject.value.foo.bar.deep = 10
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Kyrie890514
Alex Liu
丶远方
Hammad Asif
Changelog
​
v10.1.0 on 4/22/2023
8f6a0 - feat(watch): watchImmediate and watchDeep support overloads (#2998)
v10.0.0-beta.3 on 4/13/2023
e6e25 - fix(watchDeep,watchImmediate): fix callback function execution logic (#2951)
v10.0.0-beta.0 on 3/14/2023
b4ec7 - feat(watch): shorthands for watch (#2651)
tryOnScopeDispose | VueUse

tryOnScopeDispose
​
Category
Component
Export Size
100 B
Last Changed
10 months ago

Safe onScopeDispose. Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing

Usage
​
js
import { tryOnScopeDispose } from '@vueuse/core'

tryOnScopeDispose(() => {

})
Source
​

Source • Docs

Contributors
​
Anthony Fu
ByMykel
Peter Shih
Changelog
​
No recent changes
tryOnBeforeUnmount | VueUse

tryOnBeforeUnmount
​
Category
Component
Export Size
93 B
Last Changed
2 years ago

Safe onBeforeUnmount. Call onBeforeUnmount() if it's inside a component lifecycle, if not, do nothing

Usage
​
js
import { tryOnBeforeUnmount } from '@vueuse/core'

tryOnBeforeUnmount(() => {

})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Ngheizit
Changelog
​
No recent changes
provideLocal | VueUse

provideLocal
​
Category
State
Export Size
Last Changed
2 months ago

Extended provide with ability to call injectLocal to obtain the value in the same component.

Usage
​
vue
<script setup>
import { injectLocal, provideLocal } from '@vueuse/core'

provideLocal('MyInjectionKey', 1)
const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
</script>
Source
​

Source • Docs

Contributors
​
Changelog
​
v10.5.0 on 10/7/2023
cf757 - fix: vue 2 support for provideLocal and injectLocal (#3464)
5d948 - feat(createInjectionState): allow provide and inject in same component (#3387)
injectLocal | VueUse

injectLocal
​
Category
State
Export Size
Last Changed
2 months ago

Extended inject with ability to call provideLocal to provide the value in the same component.

Usage
​
vue
<script setup>
import { injectLocal, provideLocal } from '@vueuse/core'

provideLocal('MyInjectionKey', 1)
const injectedValue = injectLocal('MyInjectionKey') // injectedValue === 1
</script>
Source
​

Source • Docs

Contributors
​
Changelog
​
v10.5.0 on 10/7/2023
cf757 - fix: vue 2 support for provideLocal and injectLocal (#3464)
5d948 - feat(createInjectionState): allow provide and inject in same component (#3387)
useToString | VueUse

useToString
​
Category
Utilities
Export Size
111 B
Last Changed
8 months ago

Reactively convert a ref to string.

Usage
​
ts
import { useToString } from '@vueuse/core'

const number = ref(3.14)
const str = useToString(number)

str.value // '3.14'
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.0 on 8/4/2022
2b869 - feat: new function
useToNumber | VueUse

useToNumber
​
Category
Utilities
Export Size
203 B
Last Changed
6 months ago

Reactively convert a string ref to number.

Usage
​
ts
import { useToNumber } from '@vueuse/core'

const str = ref('123')
const number = useToNumber(str)

number.value // 123
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.0 on 8/4/2022
f69a3 - feat: new function
useToggle | VueUse

useToggle
​
Category
Utilities
Export Size
200 B
Last Changed
2 months ago

A boolean switcher with utility functions.

Demo
​

source

Value: OFF

ToggleSet ONSet OFF
Usage
​
js
import { useToggle } from '@vueuse/core'

const [value, toggle] = useToggle()

When you pass a ref, useToggle will return a simple toggle function instead:

js
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)

Note: be aware that the toggle function accepts the first argument as the override value. You might want to avoid directly passing the function to events in the template, as the event object will pass in.

html
<!-- caution: $event will be pass in -->
<button @click="toggleDark" />
<!-- recommended to do this -->
<button @click="toggleDark()" />
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
elky
Jelf
webfansplz
Alex Kozack
Alexey Iskhakov
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useDebounceFn | VueUse

useDebounceFn
​
Category
Utilities
Export Size
372 B
Last Changed
2 months ago
Related
useThrottleFn

Debounce execution of a function.

Debounce is an overloaded waiter: if you keep asking him your requests will be ignored until you stop and give him some time to think about your latest inquiry.

Demo
​

source

Smash me!
Delay is set to 1000ms and maxWait is set to 5000ms for this demo.

Button clicked: 0

Event handler called: 0

Usage
​
js
import { useDebounceFn } from '@vueuse/core'

const debouncedFn = useDebounceFn(() => {
  // do something
}, 1000)

window.addEventListener('resize', debouncedFn)

You can also pass a 3rd parameter to this, with a maximum wait time, similar to lodash debounce

js
import { useDebounceFn } from '@vueuse/core'

// If no invokation after 5000ms due to repeated input,
// the function will be called anyway.
const debouncedFn = useDebounceFn(() => {
  // do something
}, 1000, { maxWait: 5000 })

window.addEventListener('resize', debouncedFn)

Optionally, you can get the return value of the function using promise operations.

js
import { useDebounceFn } from '@vueuse/core'

const debouncedRequest = useDebounceFn(() => 'response', 1000)

debouncedRequest().then((value) => {
  console.log(value) // 'response'
})

// or use async/await
async function doRequest() {
  const value = await debouncedRequest()
  console.log(value) // 'response'
}

Since unhandled rejection error is quite annoying when developer doesn't need the return value, the promise will NOT be rejected if the function is canceled by default. You need to specify the option rejectOnCancel: true to capture the rejection.

js
import { useDebounceFn } from '@vueuse/core'

const debouncedRequest = useDebounceFn(() => 'response', 1000, { rejectOnCancel: true })

debouncedRequest()
  .then((value) => {
    // do something
  })
  .catch(() => {
    // do something when canceled
  })

// calling it again will cancel the previous request and gets rejected
setTimeout(debouncedRequest, 500)
Recommended Reading
​
Debounce vs Throttle: Definitive Visual Guide
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
vaakian X
azaleta
Joe Maylor
Jakub Freisler
wheat
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v9.10.0 on 1/3/2023
4d305 - feat(useDebounceFn,useThrottleFn): return result using promise (#2580)
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useCounter | VueUse

useCounter
​
Category
Utilities
Export Size
185 B
Last Changed
2 months ago

Basic counter with utility functions.

Demo
​

source

Count: 0

IncrementDecrementIncrement (+5)Decrement (-5)Set (100)Reset
Basic Usage
​
js
import { useCounter } from '@vueuse/core'

const { count, inc, dec, set, reset } = useCounter()
Usage with options
​
js
import { useCounter } from '@vueuse/core'

const { count, inc, dec, set, reset } = useCounter(1, { min: 0, max: 16 })
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Rock070
iChengbo
Damien Roche
Alex Kozack
Changelog
​
v10.3.0 on 7/30/2023
6ae3a - feat: initialValue support ref (#3266)
v9.4.0 on 10/25/2022
cb78f - fix: set and reset should also be limited (#2179)
set | VueUse

set
​
Category
Utilities
Export Size
142 B
Last Changed
2 years ago

Shorthand for ref.value = x

Usage
​
ts
import { set } from '@vueuse/core'

const a = ref(0)

set(a, 1)

console.log(a.value) // 1
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
No recent changes
makeDestructurable | VueUse

makeDestructurable
​
Category
Utilities
Export Size
364 B
Last Changed
last year

Make isomorphic destructurable for object and array at the same time. See this blog for more details.

Usage
​

TypeScript Example:

TypeScript
ts
import { makeDestructurable } from '@vueuse/core'
const foo = { name: 'foo' }
const bar = 1024
const obj = makeDestructurable({ foo, bar } as const, [foo, bar] as const)

Usage:

ts
let { foo, bar } = obj
let [foo, bar] = obj
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
No recent changes
isDefined | VueUse

isDefined
​
Category
Utilities
Export Size
86 B
Last Changed
7 months ago

Non-nullish checking type guard for Ref.

Usage
​
ts
import { isDefined } from '@vueuse/core'

const example = ref(Math.random() ? 'example' : undefined) // Ref<string | undefined>

if (isDefined(example))
  example // Ref<string>
Source
​

Source • Docs

Contributors
​
Anthony Fu
Glen
Changelog
​
No recent changes
get | VueUse

get
​
Category
Utilities
Export Size
80 B
Last Changed
8 months ago

Shorthand for accessing ref.value

Usage
​
ts
import { get } from '@vueuse/core'

const a = ref(42)

console.log(get(a)) // 42
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
No recent changes
createEventHook | VueUse

createEventHook
​
Category
Utilities
Export Size
212 B
Last Changed
last week

Utility for creating event hooks

Usage
​

Creating a function that uses createEventHook

TypeScript
ts
import { createEventHook } from '@vueuse/core'
export function useMyFetch(url) {
  const fetchResult = createEventHook<Response>()
  const fetchError = createEventHook<any>()
  fetch(url)
    .then((result) => fetchResult.trigger(result))
    .catch((error) => fetchError.trigger(error.message))
  return {
    onResult: fetchResult.on,
    onError: fetchError.on,
  }
}

Using a function that uses createEventHook

html
<script setup lang="ts">
import { useMyFetch } from './my-fetch-function'

const { onResult, onError } = useMyFetch('my api url')

onResult((result) => {
  console.log(result)
})

onError((error) => {
  console.error(error)
})
</script>
Source
​

Source • Docs

Contributors
​
Anthony Fu
wheat
Curt Grimes
Guillaume Chau
丶远方
Amirreza Zarkesh
超杰
sun0day
Changelog
​
v10.6.0 on 11/9/2023
6040e - feat: allow trigger to optionally have no parameters (#3507)
v10.0.0-beta.0 on 3/14/2023
31347 - feat: allow awaiting on trigger (#2824)
dd514 - fix(useEventBus,createEventHook)!: dedupe registration of the same function (#2748)
v9.7.0 on 12/16/2022
fdd4d - feat(createEeventHook): auto dispose (#2518)
useArraySome | VueUse

useArraySome
​
Category
Array
Export Size
137 B
Last Changed
2 months ago

Reactive Array.some

Usage
​
Use with array of multiple refs
​
js
import { useArraySome } from '@vueuse/core'

const item1 = ref(0)
const item2 = ref(2)
const item3 = ref(4)
const item4 = ref(6)
const item5 = ref(8)
const list = [item1, item2, item3, item4, item5]
const result = useArraySome(list, i => i > 10)
// result.value: false
item1.value = 11
// result.value: true
Use with reactive array
​
js
import { useArraySome } from '@vueuse/core'

const list = ref([0, 2, 4, 6, 8])
const result = useArraySome(list, i => i > 10)
// result.value: false
list.value.push(11)
// result.value: true
Source
​

Source • Docs

Contributors
​
Anthony Fu
Levi (Nguyễn Lương Huy)
Levi (Nguyễn Lương Huy)
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.4 on 7/17/2022
d06bd - feat: new function (#1916)
useArrayReduce | VueUse

useArrayReduce
​
Category
Array
Export Size
171 B
Last Changed
2 months ago

Reactive Array.reduce.

Usage
​
js
import { useArrayReduce } from '@vueuse/core'

const sum = useArrayReduce([ref(1), ref(2), ref(3)], (sum, val) => sum + val)
// sum.value: 6
Use with reactive array
​
js
import { useArrayReduce } from '@vueuse/core'

const list = reactive([1, 2])
const sum = useArrayReduce(list, (sum, val) => sum + val)

list.push(3)
// sum.value: 6
Use with initialValue
​
js
import { useArrayReduce } from '@vueuse/core'

const list = reactive([{ num: 1 }, { num: 2 }])
const sum = useArrayReduce(list, (sum, val) => sum + val.num, 0)
// sum.value: 3
Source
​

Source • Docs

Contributors
​
Anthony Fu
Levi (Nguyễn Lương Huy)
XLor
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.4 on 7/17/2022
79e44 - feat: new function (#1919)
toValue | VueUse

toValue
​
Category
Reactivity
Export Size
92 B
Last Changed
7 months ago
Alias
resolveUnref
Related
toRef

Get the value of value/ref/getter.

Usage
​
ts
import { toValue } from '@vueuse/core'

const foo = ref('hi')

const a = toValue(0) // 0
const b = toValue(foo) // 'hi'
const c = toValue(() => 'hi') // 'hi'
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat: rename resolveUnref to toValue
v8.8.0 on 7/6/2022
29fd5 - feat(resolveRef): new function (#1743)
toRef | VueUse

toRef
​
Category
Reactivity
Export Size
159 B
Last Changed
7 months ago
Alias
resolveRef
Related
toValue

Normalize value/ref/getter to ref or computed.

Usage
​
ts
import { toRef } from '@vueuse/core'

const foo = ref('hi')

const a = toRef(0) // Ref<number>
const b = toRef(foo) // Ref<string>
const c = toRef(() => 'hi') // ComputedRef<string>
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
v10.0.0 on 4/14/2023
cb6f9 - fix: improve types overload, close #2925
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
f307f - feat: support two argument overrides from Vue
10e98 - feat!: rename resolveRef to toRef
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.8.0 on 7/6/2022
29fd5 - feat(resolveRef): new function (#1743)
syncRef | VueUse

syncRef
​
Category
Reactivity
Export Size
237 B
Last Changed
3 weeks ago
Related
syncRefs

Two-way refs synchronization.

Demo
​

source

Usage
​
ts
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b)

console.log(a.value) // a

b.value = 'foo'

console.log(a.value) // foo

a.value = 'bar'

console.log(b.value) // bar
One directional
​
ts
import { syncRef } from '@vueuse/core'

const a = ref('a')
const b = ref('b')

const stop = syncRef(a, b, { direction: 'rtl' })
Custom Transform
​
ts
import { syncRef } from '@vueuse/core'

const a = ref(10)
const b = ref(2)

const stop = syncRef(a, b, {
  transform: {
    ltr: left => left * 2,
    rtl: right => right / 2
  }
})

console.log(b.value) // 20

b.value = 30

console.log(a.value) // 15
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Mikhailov Nikita
Doctorwu
Kylegl
zmtlwzy
Matias Capeletto
Changelog
​
v10.6.0 on 11/9/2023
89266 - feat: enhance syncRef type restrict (#3515)
v10.4.0 on 8/25/2023
bc966 - fix: avoid infinite sync (#3312)
v9.0.0-beta.2 on 7/24/2022
348d3 - feat: support custom transforms (#1968)
refWithControl | VueUse

refWithControl
​
Category
Reactivity
Export Size
474 B
Last Changed
2 months ago
Alias
controlledRef
Related
computedWithControl

Fine-grained controls over ref and its reactivity.

WARNING

This function only works for Vue 3

Usage
​

refWithControl uses extendRef to provide two extra functions get and set to have better control over when it should track/trigger the reactivity.

ts
import { refWithControl } from '@vueuse/core'

const num = refWithControl(0)
const doubled = computed(() => num.value * 2)

// just like normal ref
num.value = 42
console.log(num.value) // 42
console.log(doubled.value) // 84

// set value without triggering the reactivity
num.set(30, false)
console.log(num.value) // 30
console.log(doubled.value) // 84 (doesn't update)

// get value without tracking the reactivity
watchEffect(() => {
  console.log(num.peek())
}) // 30

num.value = 50 // watch effect wouldn't be triggered since it collected nothing.
console.log(doubled.value) // 100 (updated again since it's a reactive set)
peek, lay, untrackedGet, silentSet
​

We also provide some shorthands for doing the get/set without track/triggering the reactivity system. The following lines are equivalent.

ts
const foo = refWithControl('foo')
ts
// getting
foo.get(false)
foo.untrackedGet()
foo.peek() // an alias for `untrackedGet`
ts
// setting
foo.set('bar', false)
foo.silentSet('bar')
foo.lay('bar') // an alias for `silentSet`
Configurations
​
onBeforeChange()
​

onBeforeChange option is offered to give control over if a new value should be accepted. For example:

ts
const num = refWithControl(0, {
  onBeforeChange(value, oldValue) {
    // disallow changes larger then ±5 in one operation
    if (Math.abs(value - oldValue) > 5)
      return false // returning `false` to dismiss the change
  },
})

num.value += 1
console.log(num.value) // 1

num.value += 6
console.log(num.value) // 1 (change been dismissed)
onChanged()
​

onChanged option offers a similar functionally as Vue's watch but being synchronoused with less overhead compare to watch.

ts
const num = refWithControl(0, {
  onChanged(value, oldValue) {
    console.log(value)
  },
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
sun0day
vaakian X
Changelog
​
No recent changes
refThrottled | VueUse

refThrottled
​
Category
Reactivity
Export Size
458 B
Last Changed
2 months ago
Alias
useThrottle
throttledRef
Related
useThrottleFn

Throttle changing of a ref value.

Demo
​

source

Delay is set to 1000ms for this demo.

Throttled:

Times Updated: 0

Trailing: true

Leading: false

Usage
​
js
import { refThrottled } from '@vueuse/core'

const input = ref('')
const throttled = refThrottled(input, 1000)
Trailing
​

If you don't want to watch trailing changes, set 3rd param false (it's true by default):

js
import { refThrottled } from '@vueuse/core'

const input = ref('')
const throttled = refThrottled(input, 1000, false)
Leading
​

Allows the callback to be invoked immediately (on the leading edge of the ms timeout). If you don't want this behavior, set the 4th param false (it's true by default):

js
import { refThrottled } from '@vueuse/core'

const input = ref('')
const throttled = refThrottled(input, 1000, undefined, false)
Recommended Reading
​
Debounce vs Throttle: Definitive Visual Guide
Debouncing and Throttling Explained Through Examples
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Danny Feliz
Changelog
​
No recent changes
refDefault | VueUse

refDefault
​
Category
Reactivity
Export Size
107 B
Last Changed
2 months ago

Apply default value to a ref.

Usage
​
ts
import { refDefault, useStorage } from '@vueuse/core'

const raw = useStorage('key')
const state = refDefault(raw, 'default')

raw.value = 'hello'
console.log(state.value) // hello

raw.value = undefined
console.log(state.value) // default
Source
​

Source • Docs

Contributors
​
Anthony Fu
Changelog
​
No recent changes
refAutoReset | VueUse

refAutoReset
​
Category
Reactivity
Export Size
234 B
Last Changed
3 months ago
Alias
autoResetRef

A ref which will be reset to the default value after some time.

Demo
​

source

Change Message

Default message

Usage
​
ts
import { refAutoReset } from '@vueuse/core'

const message = refAutoReset('default message', 1000)

function setMessage() {
  // here the value will change to 'message has set' but after 1000ms, it will change to 'default message'
  message.value = 'message has set'
}
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
moander
sun0day
wheat
Kasper Seweryn
Changelog
​
v10.4.0 on 8/25/2023
71685 - feat: support maybe-ref as value (#3342)
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
reactivePick | VueUse

reactivePick
​
Category
Reactivity
Export Size
454 B
Last Changed
8 months ago

Reactively pick fields from a reactive object.

Usage
​
Basic Usage
​
ts
import { reactivePick } from '@vueuse/core'

const obj = reactive({
  x: 0,
  y: 0,
  elementX: 0,
  elementY: 0,
})

const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }
Predicate Usage
​
ts
import { reactivePick } from '@vueuse/core'

const source = reactive({
  foo: 'foo',
  bar: 'bar',
  baz: 'baz',
  qux: true,
})
const state = reactivePick(source, (value, key) => key !== 'bar' && value !== true)
// { foo: string, baz: string }
source.qux = false
// { foo: string, baz: string, qux: boolean }
Scenarios
​
Selectively passing props to child
​
html
<script setup>
import { reactivePick } from '@vueuse/core'

const props = defineProps({
  value: {
    default: 'value',
  },
  color: {
    type: String,
  },
  font: {
    type: String,
  }
})

const childProps = reactivePick(props, 'color', 'font')
</script>

<template>
  <div>
    <!-- only passes "color" and "font" props to child -->
    <ChildComp v-bind="childProps" />
  </div>
</template>
Selectively wrap reactive object
​

Instead of doing this

ts
import { reactive } from 'vue'
import { useElementBounding } from '@vueuse/core'

const { height, width } = useElementBounding() // object of refs
const size = reactive({ height, width })

Now we can just have this

ts
import { reactivePick, useElementBounding } from '@vueuse/core'

const size = reactivePick(useElementBounding(), 'height', 'width')
Source
​

Source • Docs

Contributors
​
Anthony Fu
丶远方
Brain777777
Alex Kozack
Changelog
​
v10.0.0-beta.4 on 4/13/2023
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.2 on 3/28/2023
0bde4 - feat: add predicate parameter (#2850)
v8.8.0 on 7/6/2022
80c16 - fix: allow nested keys
dd94d - fix(types): reactiveOmit and reactivePick support array as second arg (#1742)
reactifyObject | VueUse

reactifyObject
​
Category
Reactivity
Export Size
305 B
Last Changed
5 months ago

Apply reactify to an object

Usage
​
ts
import { reactifyObject } from '@vueuse/core'

const reactifiedConsole = reactifyObject(console)

const a = ref('42')

reactifiedConsole.log(a) // no longer need `.value`
Source
​

Source • Docs

Contributors
​
Anthony Fu
童欧巴
markthree
Changelog
​
v8.9.3 on 7/14/2022
d484f - feat(reactify)!: enable support for reactive getter by default (#1860)
extendRef | VueUse

extendRef
​
Category
Reactivity
Export Size
282 B
Last Changed
8 months ago

Add extra attributes to Ref.

WARNING

This function only works for Vue 2.7 or above.

Usage
​

Please note the extra attribute will not be accessible in Vue's template.

ts
import { ref } from 'vue'
import { extendRef } from '@vueuse/core'

const myRef = ref('content')

const extended = extendRef(myRef, { foo: 'extra data' })

extended.value === 'content'
extended.foo === 'extra data'

Refs will be unwrapped and be reactive

ts
const myRef = ref('content')
const extraRef = ref('extra')

const extended = extendRef(myRef, { extra: extraRef })

extended.value === 'content'
extended.extra === 'extra'

extended.extra = 'new data' // will trigger update
extraRef.value === 'new data'
Source
​

Source • Docs

Contributors
​
Anthony Fu
vaakian X
Changelog
​
v10.0.0-beta.5 on 4/13/2023
13169 - feat(createTemplatePromise): new function (#2957)
v9.8.0 on 12/20/2022
8c82e - feat: support 2.7, close #2340
reactify | VueUse

reactify
​
Category
Reactivity
Export Size
174 B
Last Changed
7 months ago
Alias
createReactiveFn
Related
createUnrefFn

Converts plain functions into reactive functions. The converted function accepts refs as its arguments and returns a ComputedRef, with proper typing.

TIP

Interested to see some application or looking for some pre-reactified functions?

Check out ⚗️ Vue Chemistry!

Usage
​

Basic example

TypeScript
ts
import { reactify } from '@vueuse/core'
// a plain function
function add(a: number, b: number): number {
  return a + b
}
// now it accept refs and returns a computed ref
// (a: number | Ref<number>, b: number | Ref<number>) => ComputedRef<number>
const reactiveAdd = reactify(add)
const a = ref(1)
const b = ref(2)
const sum = reactiveAdd(a, b)
console.log(sum.value) // 3
a.value = 5
console.log(sum.value) // 7

An example of implementing a reactive Pythagorean theorem.

TypeScript
ts
import { reactify } from '@vueuse/core'
const pow = reactify(Math.pow)
const sqrt = reactify(Math.sqrt)
const add = reactify((a: number, b: number) => a + b)
const a = ref(3)
const b = ref(4)
const c = sqrt(add(pow(a, 2), pow(b, 2)))
console.log(c.value) // 5
// 5:12:13
a.value = 5
b.value = 12
console.log(c.value) // 13

You can also do it this way:

TypeScript
ts
import { reactify } from '@vueuse/core'
function pythagorean(a: number, b: number) {
  return Math.sqrt(a ** 2 + b ** 2)
}
const a = ref(3)
const b = ref(4)
const c = reactify(pythagorean)(a, b)
console.log(c.value) // 5

Another example of making reactive stringify

ts
import { reactify } from '@vueuse/core'

const stringify = reactify(JSON.stringify)

const obj = ref(42)
const dumped = stringify(obj)

console.log(dumped.value) // '42'

obj.value = { foo: 'bar' }

console.log(dumped.value) // '{"foo":"bar"}'
Source
​

Source • Docs

Contributors
​
Anthony Fu
ordago
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v8.9.3 on 7/14/2022
d484f - feat!: enable support for reactive getter by default (#1860)
computedWithControl | VueUse

computedWithControl
​
Category
Reactivity
Export Size
250 B
Last Changed
7 months ago
Alias
controlledComputed
Related
refWithControl

Explicitly define the dependencies of computed.

Usage
​
TypeScript
ts
import { computedWithControl } from '@vueuse/core'
const source = ref('foo')
const counter = ref(0)
const computedRef = computedWithControl(
  () => source.value, // watch source, same as `watch`
  () => counter.value, // computed getter, same as `computed`
)

With this, the changes of counter won't trigger computedRef to update but the source ref does.

ts
console.log(computedRef.value) // 0

counter.value += 1

console.log(computedRef.value) // 0

source.value = 'bar'

console.log(computedRef.value) // 1
Manual Triggering
​

You can also manually trigger the update of the computed by:

ts
const computedRef = computedWithControl(
  () => source.value,
  () => counter.value,
)

computedRef.trigger()

WARNING

Manual triggering only works for Vue 3

Source
​

Source • Docs

Contributors
​
Anthony Fu
sun0day
kongmoumou
Changelog
​
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v8.8.1 on 7/6/2022
a1077 - fix: trigger only work in Vue 3
01fca - feat: support manual triggering
v8.7.5 on 6/19/2022
ab9d3 - fix: source type match vue.watch (#1674)
computedEager | VueUse

computedEager
​
Category
Reactivity
Export Size
398 B
Last Changed
2 years ago
Alias
eagerComputed

Eager computed without lazy evaluation.

Learn more at Vue: When a computed property can be the wrong tool.

Use computed() when you have a complex calculation going on, which can actually profit from caching and lazy evaluation and should only be (re-)calculated if really necessary.
Use computedEager() when you have a simple operation, with a rarely changing return value – often a boolean.
Demo
​

source

Lazy Computed
Is over 5: false
Renders: 0
Eager Computed
Is over 5: false
Renders: 0
Count: 0
DecrementIncrement
Usage
​
js
import { computedEager } from '@vueuse/core'

const todos = ref([])
const hasOpenTodos = computedEager(() => !!todos.length)

console.log(hasOpenTodos.value) // false
toTodos.value.push({ title: 'Learn Vue' })
console.log(hasOpenTodos.value) // true
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jonathan Tovar Diaz
wheat
Changelog
​
No recent changes
whenever | VueUse

whenever
​
Category
Watch
Export Size
97 B
Last Changed
last year

Shorthand for watching value to be truthy.

Usage
​
js
import { useAsyncState, whenever } from '@vueuse/core'

const { state, isReady } = useAsyncState(
  fetch('https://jsonplaceholder.typicode.com/todos/1').then(t => t.json()),
  {},
)

whenever(isReady, () => console.log(state))
ts
// this
whenever(ready, () => console.log(state))

// is equivalent to:
watch(ready, (isReady) => {
  if (isReady)
    console.log(state)
})
Callback Function
​

Same as watch, the callback will be called with cb(value, oldValue, onInvalidate).

ts
whenever(height, (current, lastHeight) => {
  if (current > lastHeight)
    console.log(`Increasing height by ${current - lastHeight}`)
})
Computed
​

Same as watch, you can pass a getter function to calculate on each change.

ts
// this
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
)
Options
​

Options and defaults are same with watch.

ts
// this
whenever(
  () => counter.value === 7,
  () => console.log('counter is 7 now!'),
  { flush: 'sync' },
)
Source
​

Source • Docs

Contributors
​
Anthony Fu
freakzlike
donotloveshampo
Chung, Lian
Alex Kozack
Changelog
​
No recent changes
watchTriggerable | VueUse

watchTriggerable
​
Category
Watch
Export Size
942 B
Last Changed
8 months ago

Watch that can be triggered manually

Demo
​

source

Value: 0
UpdateManual TriggerReset

Log (500 ms delay)
Usage
​

A watch wrapper that supports manual triggering of WatchCallback, which returns an additional trigger to execute a WatchCallback immediately.

ts
import { watchTriggerable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref(0)

const { trigger, ignoreUpdates } = watchTriggerable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // logs: Changed to bar!

// Execution of WatchCallback via `trigger` does not require waiting
trigger() // logs: Changed to bar!
onCleanup
​

When you want to manually call a watch that uses the onCleanup parameter; simply taking the WatchCallback out and calling it doesn't make it easy to implement the onCleanup parameter.

Using watchTriggerable will solve this problem.

ts
import { watchTriggerable } from '@vueuse/core'
import { ref } from 'vue'

const source = ref(0)

const { trigger } = watchTriggerable(
  source,
  async (v, _, onCleanup) => {
    let canceled = false
    onCleanup(() => canceled = true)

    await new Promise(resolve => setTimeout(resolve, 500))
    if (canceled)
      return

    console.log(`The value is "${v}"\n`)
  },
)

source.value = 1 // no log
await trigger() // logs (after 500 ms): The value is "1"
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Ayaka Rizumu
Changelog
​
v8.8.0 on 7/6/2022
cf663 - feat: extending watch with a manual trigger (#1736)
watchThrottled | VueUse

watchThrottled
​
Category
Watch
Export Size
831 B
Last Changed
8 months ago
Alias
throttledWatch

Throttled watch.

Demo
​

source

Delay is set to 1000ms for this demo.

Input:

Times Updated: 0

Usage
​

Similar to watch, but offering an extra option throttle which will be applied to the callback function.

ts
import { watchThrottled } from '@vueuse/core'

watchThrottled(
  source,
  () => { console.log('changed!') },
  { throttle: 500 },
)

It's essentially a shorthand for the following code:

ts
import { throttleFilter, watchWithFilter } from '@vueuse/core'

watchWithFilter(
  source,
  () => { console.log('changed!') },
  {
    eventFilter: throttleFilter(500),
  },
)
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
丶远方
lvjiaxuan
Joe Zimmerman
webfansplz
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchPausable | VueUse

watchPausable
​
Category
Watch
Export Size
674 B
Last Changed
last year
Alias
pausableWatch

Pausable watch

Demo
​

source

Type something below to trigger the watch
PauseResumeClear Log


Log
Usage
​

Use as normal the watch, but return extra pause() and resume() functions to control.

ts
import { watchPausable } from '@vueuse/core'
import { nextTick, ref } from 'vue'

const source = ref('foo')

const { stop, pause, resume } = watchPausable(
  source,
  v => console.log(`Changed to ${v}!`),
)

source.value = 'bar'
await nextTick() // Changed to bar!

pause()

source.value = 'foobar'
await nextTick() // (nothing happend)

resume()

source.value = 'hello'
await nextTick() // Changed to hello!
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
vaakian X
lvjiaxuan
Changelog
​
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchOnce | VueUse

watchOnce
​
Category
Watch
Export Size
107 B
Last Changed
3 weeks ago

watch that only triggers once.

Usage
​

After the callback function has been triggered once, the watch will be stopped automatically.

ts
import { watchOnce } from '@vueuse/core'

watchOnce(source, () => {
  // triggers only once
  console.log('source changed!')
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Valery
vaakian X
lvjiaxuan
lvjiaxuan
HG
webfansplz
Changelog
​
v10.6.0 on 11/9/2023
bb0a7 - feat: return function for manual watcher stopping (#3475)
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchImmediate | VueUse

watchImmediate
​
Category
Watch
Export Size
322 B
Last Changed
6 months ago

Shorthand for watching value with {immediate: true}

Usage
​

Similar to watch, but with { immediate: true }

ts
import { watchImmediate } from '@vueuse/core'

const obj = ref('vue-use')

// changing the value from some external store/composables
obj.value = 'VueUse'

watchImmediate(nestedObject, (obj) => {
  console.log(updated) // Console.log will be logged twice
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Andrew Ferreira
Kyrie890514
Alex Liu
丶远方
Magomed Chemurziev
Hammad Asif
Changelog
​
v10.2.0 on 6/16/2023
4b4e6 - fix: fix overload signature (#3114)
v10.1.0 on 4/22/2023
8f6a0 - feat(watch): watchImmediate and watchDeep support overloads (#2998)
v10.0.0-beta.3 on 4/13/2023
e6e25 - fix(watchDeep,watchImmediate): fix callback function execution logic (#2951)
v10.0.0-beta.0 on 3/14/2023
b4ec7 - feat(watch): shorthands for watch (#2651)
watchDeep | VueUse

watchDeep
​
Category
Watch
Export Size
325 B
Last Changed
7 months ago

Shorthand for watching value with {deep: true}

Usage
​

Similar to watch, but with { deep: true }

ts
import { watchDeep } from '@vueuse/core'

const nestedObject = ref({ foo: { bar: { deep: 5 } } })

watchDeep(nestedObject, (obj) => {
  console.log(updated)
})

onMounted(() => {
  nestedObject.value.foo.bar.deep = 10
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Kyrie890514
Alex Liu
丶远方
Hammad Asif
Changelog
​
v10.1.0 on 4/22/2023
8f6a0 - feat(watch): watchImmediate and watchDeep support overloads (#2998)
v10.0.0-beta.3 on 4/12/2023
e6e25 - fix(watchDeep,watchImmediate): fix callback function execution logic (#2951)
v10.0.0-beta.0 on 3/14/2023
b4ec7 - feat(watch): shorthands for watch (#2651)
watchAtMost | VueUse

watchAtMost
​
Category
Watch
Export Size
510 B
Last Changed
8 months ago

watch with the number of times triggered.

Usage
​

Similar to watch with an extra option count which set up the number of times the callback function is triggered. After the count is reached, the watch will be stopped automatically.

ts
import { watchAtMost } from '@vueuse/core'

watchAtMost(
  source,
  () => { console.log('trigger!') }, // triggered it at most 3 times
  {
    count: 3, // the number of times triggered
  },
)
Source
​

Source • Docs

Contributors
​
Anthony Fu
vaakian X
lvjiaxuan
lvjiaxuan
HG
webfansplz
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)
watchArray | VueUse

watchArray
​
Category
Watch
Export Size
281 B
Last Changed
2 months ago

Watch for an array with additions and removals.

Usage
​

Similar to watch, but provides the added and removed elements to the callback function. Pass { deep: true } if the list is updated in place with push, splice, etc.

ts
import { watchArray } from '@vueuse/core'

const list = ref([1, 2, 3])

watchArray(list, (newList, oldList, added, removed) => {
  console.log(newList) // [1, 2, 3, 4]
  console.log(oldList) // [1, 2, 3]
  console.log(added) // [4]
  console.log(removed) // []
})

onMounted(() => {
  list.value = [...list.value, 4]
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
sun0day
Di Weng
Changelog
​
v8.9.0 on 7/6/2022
2ba83 - feat: new function (#1705)
watchDebounced | VueUse

watchDebounced
​
Category
Watch
Export Size
786 B
Last Changed
8 months ago
Alias
debouncedWatch

Debounced watch

Demo
​

source

Delay is set to 1000ms and maxWait is set to 5000ms for this demo.

Input:

Times Updated: 0

Usage
​

Similar to watch, but offering extra options debounce and maxWait which will be applied to the callback function.

ts
import { watchDebounced } from '@vueuse/core'

watchDebounced(
  source,
  () => { console.log('changed!') },
  { debounce: 500, maxWait: 1000 },
)

It's essentially a shorthand for the following code:

ts
import { debounceFilter, watchWithFilter } from '@vueuse/core'

watchWithFilter(
  source,
  () => { console.log('changed!') },
  {
    eventFilter: debounceFilter(500, { maxWait: 1000 }),
  },
)
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
webfansplz
vaakian X
lvjiaxuan
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
bb0ac - fix(watch*): fix T type for WatchCallback (#1692)