matijao/webdev huggingface dataset:
until | VueUse

until
​
Category
Watch
Export Size
595 B
Last Changed
4 months ago

Promised one-time watch for changes

Demo
​

source

Add to 7 to show the alert.

Count: 0

IncrementDecrement
Usage
​
Wait for some async data to be ready
​
js
import { until, useAsyncState } from '@vueuse/core'

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

;(async () => {
  await until(isReady).toBe(true)

  console.log(state) // state is now ready!
})()
Wait for custom conditions
​

You can use invoke to call the async function.

js
import { invoke, until, useCounter } from '@vueuse/core'

const { count } = useCounter()

invoke(async () => {
  await until(count).toMatch(v => v > 7)

  alert('Counter is now larger than 7!')
})
Timeout
​
ts
// will be resolve until ref.value === true or 1000ms passed
await until(ref).toBe(true, { timeout: 1000 })

// will throw if timeout
try {
  await until(ref).toBe(true, { timeout: 1000, throwOnTimeout: true })
  // ref.value === true
}
catch (e) {
  // timeout
}
More Examples
​
ts
await until(ref).toBe(true)
await until(ref).toMatch(v => v > 10 && v < 100)
await until(ref).changed()
await until(ref).changedTimes(10)
await until(ref).toBeTruthy()
await until(ref).toBeNull()

await until(ref).not.toBeNull()
await until(ref).not.toBeTruthy()
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
sun0day
lsdsjy
Mitchell
Jeff Zou
wheat
Shinigami
Alex Kozack
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.3.0 on 9/26/2022
1f656 - fix: .not returns new instance (#2224)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
c4853 - feat: improved until types (#1493)
tryOnUnmounted | VueUse

tryOnUnmounted
​
Category
Component
Export Size
85 B
Last Changed
2 years ago

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

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

tryOnUnmounted(() => {

})
Source
​

Source • Docs

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

tryOnMounted
​
Category
Component
Export Size
109 B
Last Changed
2 years ago

Safe onMounted. Call onMounted() if it's inside a component lifecycle, if not, just call the function

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

tryOnMounted(() => {

})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Connor Dooley
Nicholai Nissen
Changelog
​
No recent changes
tryOnBeforeMount | VueUse

tryOnBeforeMount
​
Category
Component
Export Size
114 B
Last Changed
last year

Safe onBeforeMount. Call onBeforeMount() if it's inside a component lifecycle, if not, just call the function

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

tryOnBeforeMount(() => {

})
Source
​

Source • Docs

Contributors
​
Anthony Fu
Eureka
Changelog
​
No recent changes
useTimeoutFn | VueUse

useTimeoutFn
​
Category
Animation
Export Size
303 B
Last Changed
8 months ago

Wrapper for setTimeout with controls.

Demo
​

source

Please wait for 3 seconds

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

const { isPending, start, stop } = useTimeoutFn(() => {
  /* ... */
}, 3000)
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Scott Bedard
童欧巴
Dan Rose
Kasper Seweryn
jack zhang
vaakian X
Jelf
Shinigami
Peter Shih
liaoliao666
Sergey Shumov
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.12.0 on 1/29/2023
39183 - feat(useRafFn, useIntervalFn, useTimeoutFn): make status readonly (#2685)
e054a - fix: respect callback parameters in start function (#2693)
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v9.0.0-beta.1 on 7/20/2022
4ca70 - fix(useTimeoutFn,useTimeout)!: rename type TimeoutOptions to UseTimeoutOptions and TimeoutFnOptions to UseTimeoutFnOptions (#1944)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useIntervalFn | VueUse

useIntervalFn
​
Category
Animation
Export Size
341 B
Last Changed
8 months ago

Wrapper for setInterval with controls

Demo
​

source

Hello

interval:

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

const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
}, 1000)
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
Dan Rose
sun0day
Enzo Innocenzi
wwj
Matvey Melishev
meteorlxy
Aurélio A. Heckert
xuxuhahaha
Hogne Vevle
Daiki Ojima
Changelog
​
v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.12.0 on 1/29/2023
39183 - feat(useRafFn, useIntervalFn, useTimeoutFn): make status readonly (#2685)
v9.7.0 on 12/16/2022
8bb7b - fix: watch computed refs instead of just refs (#2539)
v9.0.0-beta.1 on 7/20/2022
4bc0f - fix!: rename type IntervalFnOptions to UseIntervalFnOptions (#1943)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.7.0 on 6/16/2022
16740 - fix: watch interval correctly (#1676)
v8.6.0 on 5/31/2022
29fc5 - fix: unref interval (#1633)
useTimeout | VueUse

useTimeout
​
Category
Animation
Export Size
565 B
Last Changed
last year

Update value after a given time with controls.

Demo
​

source

Ready: false

Start Again
Usage
​
js
import { promiseTimeout, useTimeout } from '@vueuse/core'

const ready = useTimeout(1000)
js
const { ready, start, stop } = useTimeout(1000, { controls: true })
js
console.log(ready.value) // false

await promiseTimeout(1200)

console.log(ready.value) // true
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Waleed Khaled
vaakian X
Jelf
Shinigami
Mark Noonan
Changelog
​
v9.3.0 on 9/26/2022
33dbc - feat: optional callback for useInterval, useTimeout & useTimestamp (#2240)
v9.0.0-beta.1 on 7/20/2022
4ca70 - fix(useTimeoutFn,useTimeout)!: rename type TimeoutOptions to UseTimeoutOptions and TimeoutFnOptions to UseTimeoutFnOptions (#1944)
useInterval | VueUse

useInterval
​
Category
Animation
Export Size
620 B
Last Changed
8 months ago

Reactive counter increases on every interval

Demo
​

source

Interval fired: 0

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

// count will increase every 200ms
const counter = useInterval(200)
ts
const { counter, reset, pause, resume } = useInterval(200, { controls: true })
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
mohammadhosry
Waleed Khaled
vaakian X
Nurettin Kaya
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v9.13.0 on 2/18/2023
db66c - fix: fix types
81db6 - feat: add reset function (#2686)
v9.3.0 on 9/26/2022
33dbc - feat: optional callback for useInterval, useTimeout & useTimestamp (#2240)
v9.0.0-beta.1 on 7/20/2022
43732 - fix!: rename type IntervalOptions to UseIntervalOptions (#1945)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useLastChanged | VueUse

useLastChanged
​
Category
State
Export Size
143 B
Last Changed
2 months ago

Records the timestamp of the last change

Demo
​

source

Last changed: 5 minutes ago (1701205660123)
Usage
​
ts
import { useLastChanged } from '@vueuse/core'
import { nextTick } from 'vue-demi'

const a = ref(0)
const lastChanged = useLastChanged(a)

a.value = 1

await nextTick()

console.log(lastChanged.value) // 0

By default the change is recorded on the next tick (watch() with flush: 'post'). If you want to record the change immediately, pass flush: 'sync' as the second argument.

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

const a = ref(0)
const lastChanged = useLastChanged(a, { flush: 'sync' })

a.value = 1

console.log(lastChanged.value) // 0
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jady Dragon
Alex Kozack
Changelog
​
No recent changes
injectLocal | VueUse

injectLocal
​
Category
State
Export Size
Last Changed
last month

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)
createSharedComposable | VueUse

createSharedComposable
​
Category
State
Export Size
213 B
Last Changed
9 months ago
Related
createGlobalState

Make a composable function usable with multiple Vue instances.

Usage
​
ts
import { createSharedComposable, useMouse } from '@vueuse/core'

const useSharedMouse = createSharedComposable(useMouse)

// CompA.vue
const { x, y } = useSharedMouse()

// CompB.vue - will reuse the previous state and no new event listeners will be registered
const { x, y } = useSharedMouse()
Source
​

Source • Docs

Contributors
​
Anthony Fu
童欧巴
Egor Kotlyarov
Changelog
​
No recent changes
createGlobalState | VueUse

createGlobalState
​
Category
State
Export Size
125 B
Last Changed
7 months ago
Related
createSharedComposable

Keep states in the global scope to be reusable across Vue instances.

Demo
​

source

name: 'Banana'
color: 'Yellow'
size: 'Medium'

Usage
​
Without Persistence (Store in Memory)
​
js
// store.js
import { ref } from 'vue'
import { createGlobalState } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => {
    const count = ref(0)
    return { count }
  }
)

A bigger example:

js
// store.js
import { computed, ref } from 'vue'
import { createGlobalState } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => {
    // state
    const count = ref(0)

    // getters
    const doubleCount = computed(() => count.value * 2)

    // actions
    function increment() {
      count.value++
    }

    return { count, doubleCount, increment }
  }
)
With Persistence
​

Store in localStorage with useStorage():

js
// store.js
import { createGlobalState, useStorage } from '@vueuse/core'

export const useGlobalState = createGlobalState(
  () => useStorage('vueuse-local-storage', 'initialValue'),
)
js
// component.js
import { useGlobalState } from './store'

export default defineComponent({
  setup() {
    const state = useGlobalState()
    return { state }
  },
})
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
童欧巴
JD Solanki
Ducz01
Tobi
thefeymesaleng
plylrnsdy
wheat
Preston Alvarado
jelf
Changelog
​
v10.0.0-beta.0 on 3/14/2023
f21b2 - feat: allow passing initial args (#2790)