matijao/webdev huggingface dataset:
useClipboardItems | VueUse

useClipboardItems
​
Category
Browser
Export Size
Last Changed
3 weeks ago
Related
useClipboard

Reactive Clipboard API. Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API. Without user permission, reading or altering the clipboard contents is not permitted.

Demo
​

source

Clipboard Permission: read prompt | write prompt

Current copied: none

Copy
Difference from useClipboard
​

useClipboard is a "text-only" function, while useClipboardItems is a ClipboardItem based function. You can use useClipboardItems to copy any content supported by ClipboardItem.

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

const mime = 'text/html'
const source = ref([
  new ClipboardItem({
    [mime]: new Blob(['\'<b>HTML content</b>\'', { type: mime }]),
  })
])

const { content, copy, copied, isSupported } = useClipboardItems({ source })
html
<div v-if="isSupported">
  <button @click='copy(source)'>
    <!-- by default, `copied` will be reset in 1.5s -->
    <span v-if='!copied'>Copy</span>
    <span v-else>Copied!</span>
  </button>
  <p>
    Current copied: <code>{{ text || 'none' }}</code>
  </p>
</div>
<p v-else>
  Your browser does not support Clipboard API
</p>
Source
​

Source • Demo • Docs

Contributors
​
Changelog
​
v10.6.0 on 11/9/2023
1aa50 - feat: new function (#3477)
useClipboard | VueUse

useClipboard
​
Category
Browser
Export Size
1.02 kB
Last Changed
3 weeks ago
Related
useClipboardItems

Reactive Clipboard API. Provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard. Access to the contents of the clipboard is gated behind the Permissions API. Without user permission, reading or altering the clipboard contents is not permitted.

Learn how to reactively save text to the clipboard with this FREE video lesson from Vue School!
Demo
​

source

Clipboard Permission: read prompt | write prompt

Current copied: none

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

const source = ref('Hello')
const { text, copy, copied, isSupported } = useClipboard({ source })
html
<div v-if="isSupported">
    <button @click='copy(source)'>
      <!-- by default, `copied` will be reset in 1.5s -->
      <span v-if='!copied'>Copy</span>
      <span v-else>Copied!</span>
    </button>
    <p>
      Current copied: <code>{{ text || 'none' }}</code>
    </p>
  </div>
  <p v-else>
    Your browser does not support Clipboard API
  </p>

Set legacy: true to keep the ability to copy if Clipboard API is not available. It will handle copy with execCommand as fallback.

Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseClipboard source="copy me" v-slot="{ copy, copied }">
  <button @click="copy()">
    {{ copied ? 'Copied' : 'Copy' }}
  </button>
</UseClipboard>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
Sanxiaozhizi
Alexzvn
Cat1007
丶远方
Olusola Olawale
Lumdzeehol
Lumdzeehol
Curt Grimes
wheat
洪布斯
karma
Shinigami
Alex Kozack
Antério Vieira
Changelog
​
v10.6.0 on 11/9/2023
71b46 - feat: UseClipboard component (#3359)
37e86 - fix: use legacy way when without permission (#3379)
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.4.0 on 10/25/2022
5ec65 - feat: support legacy copy (#2336)
v8.9.3 on 7/14/2022
16856 - fix!: rename type ClipboardOptions to UseClipboardOptions and ClipboardReturn to UseClipboardReturn (#1861)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useBrowserLocation | VueUse

useBrowserLocation
​
Category
Browser
Export Size
952 B
Last Changed
2 months ago

Reactive browser location

NOTE: If you're using Vue Router, use useRoute provided by Vue Router instead.

Demo
​

source

Input and hash will be changed:
trigger: 'load'
state: null
length: 4
origin: 'https://vueuse.org'
hash: ''
host: 'vueuse.org'
hostname: 'vueuse.org'
href: 'https://vueuse.org/core/useBrowserLocation/'
pathname: '/core/useBrowserLocation/'
port: ''
protocol: 'https:'
search: ''

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

const location = useBrowserLocation()
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseBrowserLocation v-slot="{ location }">
  Browser Location: {{ location }}
</UseBrowserLocation>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
三咲智子 Kevin Deng
vaakian X
Mike
Eureka
Shinigami
wheat
Alex Kozack
Antério Vieira
Changelog
​
v10.0.0-beta.0 on 3/14/2023
a860c - feat: two-way binding (#2168)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
useBroadcastChannel | VueUse

useBroadcastChannel
​
Category
Browser
Export Size
476 B
Last Changed
8 months ago

Reactive BroadcastChannel API.

Closes a broadcast channel automatically component unmounted.

Demo
​

source

Supported: true

Please open this page in at least two tabs

Send Message
Usage
​

The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to. It allows communication between different documents (in different windows, tabs, frames, or iframes) of the same origin.

Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

js
import { ref } from 'vue'
import { useBroadcastChannel } from '@vueuse/core'

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'vueuse-demo-channel' })

const message = ref('')

message.value = 'Hello, VueUse World!'

// Post the message to the broadcast channel:
post(message.value)

// Option to close the channel if you wish:
close()
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
丶远方
Jelf
Captain
Michael J. Roberts
Changelog
​
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
useBreakpoints | VueUse

useBreakpoints
​
Category
Browser
Export Size
915 B
Last Changed
2 months ago

Reactive viewport breakpoints.

Demo
​

source

Current breakpoints: [ "sm", "md", "lg", "xl", "2xl" ]
xs(<640px): false
xs(<=640px): false
sm: false
md: false
lg: false
xl: false
2xl: true
Usage
​
js
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
const largerThanSm = breakpoints.greater('sm') // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
js
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

const laptop = breakpoints.between('laptop', 'desktop')
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Ed
Adrian Rudnik
Inesh Bose
Imam Susanto
azaleta
webfansplz
Ege İliklier
Shinigami
Alex Kozack
taidaid
wheat
Azri Kahar
Changelog
​
v10.5.0 on 10/7/2023
ec9a4 - fix: add missing breakpoint for the bootstrap (#3413)
v10.4.0 on 8/25/2023
8b5ed - feat: add breakpoints for PrimeFlex (#3317)
v10.0.0-beta.3 on 4/13/2023
e75a5 - feat: update deps
v10.0.0-beta.2 on 3/28/2023
bbabd - feat: getting current breakpoints (#2906)
v9.7.0 on 12/16/2022
30c5b - feat: add breakpoints for Master CSS (#2529)
v9.2.0 on 9/5/2022
48bf3 - feat: support greaterOrEqual etc. (#2148)
useWindowSize | VueUse

useWindowSize
​
Category
Elements
Export Size
964 B
Last Changed
4 months ago

Reactive window size

Demo
​

source

1680 x 1050

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

const { width, height } = useWindowSize()
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseWindowSize v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseWindowSize>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
Antério Vieira
Indrek Ardel
Zhousg
vaakian X
vaakian X
Shinigami
wheat
Alex Kozack
Roman Pavlov
Changelog
​
v10.0.0-beta.3 on 4/13/2023
4e7b0 - fix!: use media query instead of orientationchange listener (#2919)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.2.0 on 9/5/2022
d278f - feat: support includeScrollbar (#2161)
v8.9.3 on 7/14/2022
adf3a - fix!: rename type WindowSizeOptions to UseWindowSizeOptions (#1897)
v8.8.0 on 7/6/2022
c3f95 - feat: listen to the orientationchange event (#1609)
useWindowScroll | VueUse

useWindowScroll
​
Category
Elements
Export Size
555 B
Last Changed
3 weeks ago

Reactive window scroll

Demo
​

source

See scroll values in the lower right corner of the screen.
Scroll value
x: 0
y: 0
scroll Xscroll Y
Usage
​
js
import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()
console.log(x.value) // read current x scroll value
y.value = 100 // scroll y to 100
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Nurettin Kaya
Antério Vieira
Chen
Jelf
webfansplz
Maik Kowol
Shinigami
Alex Kozack
Changelog
​
v10.6.0 on 11/9/2023
931b2 - feat: allow rewriting back to scroll (#3500)
v9.13.0 on 2/18/2023
e490a - fix: use scrollX instead of pageXOffset (#2776)
v9.7.0 on 12/16/2022
5df0a - fix: use configured window onScroll (#2545)
useWindowFocus | VueUse

useWindowFocus
​
Category
Elements
Export Size
532 B
Last Changed
2 months ago

Reactively track window focus with window.onfocus and window.onblur events.

Demo
​

source

💡 Click somewhere outside of the document to unfocus.
Usage
​
js
import { useWindowFocus } from '@vueuse/core'

const focused = useWindowFocus()
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseWindowFocus v-slot="{ focused }">
  Document Focus: {{ focused }}
</UseWindowFocus>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
vaaski
vaakian X
Changelog
​
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
useResizeObserver | VueUse

useResizeObserver
​
Category
Elements
Export Size
671 B
Last Changed
2 months ago

Reports changes to the dimensions of an Element's content or the border-box

Demo
​

source

Resize the box to see changes
Usage
​
html
<template>
  <div ref="el">
    {{text}}
  </div>
</template>

<script>
import { ref } from 'vue'
import { useResizeObserver } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const text = ref('')

    useResizeObserver(el, (entries) => {
      const entry = entries[0]
      const { width, height } = entry.contentRect
      text.value = `width: ${width}, height: ${height}`
    })

    return {
      el,
      text,
    }
  }
}
</script>

ResizeObserver MDN

Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
acyza
ByMykel
vaakian X
karma
Shinigami
Alex Kozack
Jacob Clevenger
Sanxiaozhizi
Antério Vieira
zhong666
Changelog
​
v10.0.0-beta.2 on 3/28/2023
3e187 - feat: support element list (#2841)
v9.2.0 on 9/5/2022
3c642 - feat(useElementSize): support box sizing (#2143)
v8.9.3 on 7/14/2022
28db2 - fix!: rename type ResizeObserverOptions to UseResizeObserverOptions (#1862)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useParentElement | VueUse

useParentElement
​
Category
Elements
Export Size
496 B
Last Changed
8 months ago

Get parent element of the given element

Usage
​

When no argument is passed, it will return the parent element of the current component.

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

const parentEl = useParentElement()

onMounted(() => {
  console.log(parentEl.value)
})

It can also accept a ref as the first argument.

TypeScript
ts
import { useParentElement } from '@vueuse/core'
// Don't forget to bind the ref to the element
const tooltip = ref<HTMLElement | undefined>()
const tooltipWrapper = useParentElement(tooltip)
onMounted(() => {
  console.log(tooltipWrapper.value)
})
Source
​

Source • Docs

Contributors
​
Anthony Fu
JD Solanki
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.2 on 3/28/2023
e8168 - feat: new function (#2855)
useMutationObserver | VueUse

useMutationObserver
​
Category
Elements
Export Size
613 B
Last Changed
3 weeks ago

Watch for changes being made to the DOM tree. MutationObserver MDN

Demo
​

source

Usage
​
ts
import { ref } from 'vue'
import { useMutationObserver } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const messages = ref([])

    useMutationObserver(el, (mutations) => {
      if (mutations[0])
        messages.value.push(mutations[0].attributeName)
    }, {
      attributes: true,
    })

    return {
      el,
      messages,
    }
  },
}
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
丶远方
Jelf
huodoushigemi
AaronBeaudoin
laozei
karma
Shinigami
Alex Kozack
Antério Vieira
zhong666
Changelog
​
v10.6.0 on 11/9/2023
f9136 - feat: add takeRecords function (#3480)
v10.5.0 on 10/7/2023
8167b - feat: use MaybeComputedElementRef (#3430)
v8.9.3 on 7/14/2022
9b4f9 - fix!: rename type MutationObserverOptions to UseMutationObserverOptions (#1884)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
useMouseInElement | VueUse

useMouseInElement
​
Category
Elements
Export Size
1.12 kB
Last Changed
last week

Reactive mouse position related to an element

Demo
​

source

Hover me
x: 0
y: 0
sourceType: null
elementX: 0
elementY: 0
elementPositionX: 0
elementPositionY: 0
elementHeight: 0
elementWidth: 0
isOutside: true

Usage
​
html
<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    const { x, y, isOutside } = useMouseInElement(target)

    return { x, y, isOutside }
  }
}
</script>
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseMouseInElement v-slot="{ elementX, elementY, isOutside }">
  x: {{ elementX }}
  y: {{ elementY }}
  Is Outside: {{ isOutside }}
</UseMouseInElement>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
wheat
Aymoc
Mikhailov Nikita
vaakian X
Jelf
Ivan Agafonov
Shinigami
Alex Kozack
ctholho
Nurettin Kaya
Antério Vieira
Changelog
​
v10.6.0 on 11/9/2023
7c88d - fix: optimize outside computation (#3380)
v9.12.0 on 1/29/2023
54f4e - fix: check if mouse out of window (#2458)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v8.9.3 on 7/14/2022
4d2c8 - fix(useMouse)!: rename type MouseOptions to UseMouseOptions (#1877)
v8.6.0 on 5/31/2022
ebd60 - fix isOutside is true for detached elements (#1614) (#1615)
useIntersectionObserver | VueUse

useIntersectionObserver
​
Category
Elements
Export Size
634 B
Last Changed
8 months ago

Detects that a target element's visibility.

Demo
​

source

Enable

Scroll me down!

Hello world!

Element outside the viewport
Usage
​
html
<div ref="target">
  <h1>Hello world</h1>
</div>
js
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        targetIsVisible.value = isIntersecting
      },
    )

    return {
      target,
      targetIsVisible,
    }
  },
}
Directive Usage
​

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

html
<script setup lang="ts">
import { ref } from 'vue'
import { vIntersectionObserver } from '@vueuse/components'

const root = ref(null)

const isVisible = ref(false)

function onIntersectionObserver([{ isIntersecting }]: IntersectionObserverEntry[]) {
  isVisible.value = isIntersecting
}

</script>

<template>
  <div>
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="onIntersectionObserver">
      <p>Hello world!</p>
    </div>
  </div>

  <!-- with options -->
  <div ref="root">
    <p>
      Scroll me down!
    </p>
    <div v-intersection-observer="[onIntersectionObserver, { root }]">
      <p>Hello world!</p>
    </div>
  </div>
</template>

IntersectionObserver MDN

Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
webfansplz
Sma11X
schelmo
Fernando Fernández
Alex Liu
Curt Grimes
Waleed Khaled
丶远方
Hassan Zahirnia
karma
Shinigami
Alex Kozack
Jacob Clevenger
Antério Vieira
Evgeniy Gavrilov
听风吟丶
Changelog
​
v10.0.2 on 4/14/2023
7d001 - fix: module reference, close #2972
v10.0.1 on 4/14/2023
b95b6 - fix: targets length check (#2968)
v10.0.0 on 4/14/2023
f87f8 - feat: allow multiple targets (#2964)
v10.0.0-beta.4 on 4/13/2023
4b336 - feat: support for Pausable interface (#2883)
v10.0.0-beta.2 on 3/28/2023
74b00 - fix(useElementVisibility)!: use useIntersectionObserver instead of scroll event handler (#2551)
v8.9.3 on 7/14/2022
fc03c - fix!: rename type IntersectionObserverOptions to UseIntersectionObserverOptions (#1870)
v8.9.2 on 7/12/2022
81d92 - fix(all)!: isSupported becomes Ref instead of boolean for SSR compatibility (#1800)
useElementSize | VueUse

useElementSize
​
Category
Elements
Export Size
955 B
Last Changed
3 weeks ago

Reactive size of an HTML element. ResizeObserver MDN

Demo
​

source

Resize the box to see changes
Usage
​
html
<template>
  <div ref="el">
    Height: {{ height }}
    Width: {{ width }}
  </div>
</template>

<script>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const { width, height } = useElementSize(el)

    return {
      el,
      width,
      height,
    }
  }
}
</script>
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseElementSize v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseElementSize>
Directive Usage
​

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

html
<script setup lang="ts">
import { vElementSize } from '@vueuse/components'
function onResize({ width, height }: { width: number; height: number }) {
  console.log(width, height)
}
</script>

<template>
  <textarea v-element-size="onResize" />
  <!-- with options -->
  <textarea v-element-size="[onResize, {width:100,height:100}, {'box':'content-box'} ]" />
</template>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
webfansplz
Mikhailov Nikita
wheat
menghan
仿生狮子
ByMykel
jing
vaakian X
Vasily Kuzin
vaakian X
Jelf
Shinigami
Alex Kozack
Sanxiaozhizi
Changelog
​
v10.6.0 on 11/9/2023
165c8 - fix: get value in onMounted hook (#3366)
5f545 - feat: stop function (#3367)
v10.4.0 on 8/25/2023
791f7 - fix: add as prop for component usage (#3274)
v9.12.0 on 1/29/2023
902b3 - fix: fix incorrect element size on SVG (#2661)
30475 - fix: use contentBoxSize as an array in useElementSize (#2520)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.2.0 on 9/5/2022
3c642 - feat: support box sizing (#2143)
v8.9.3 on 7/14/2022
28db2 - fix(useResizeObserver)!: rename type ResizeObserverOptions to UseResizeObserverOptions (#1862)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useElementBounding | VueUse

useElementBounding
​
Category
Elements
Export Size
1.15 kB
Last Changed
last year

Reactive bounding box of an HTML element

Demo
​

source

Resize the box to see changes
Usage
​
html
<template>
  <div ref="el" />
</template>

<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)

    return {
      el,
      /* ... */
    }
  }
}
</script>
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseElementBounding v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseElementBounding>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Jelf
wheat
vaakian X
Ducz01
hsyq
Hebilicious
webfansplz
Ciro Lo Sapio
Shinigami
Alex Kozack
Changelog
​
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.10.0 on 1/3/2023
268a6 - fix: update on scroll (#2596)
v8.9.3 on 7/14/2022
28db2 - fix(useResizeObserver)!: rename type ResizeObserverOptions to UseResizeObserverOptions (#1862)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useDropZone | VueUse

useDropZone
​
Category
Elements
Export Size
629 B
Last Changed
3 weeks ago

Create a zone where files can be dropped.

Demo
​

source

Drop files on to drop zones

PNG
SVG
General DropZone
isOverDropZone: false
Image DropZone
isOverDropZone: false
Usage
​
html
<script setup lang="ts">
import { useDropZone } from '@vueuse/core'

const dropZoneRef = ref<HTMLDivElement>()

function onDrop(files: File[] | null) {
  // called when files are dropped on zone
}

const { isOverDropZone } = useDropZone(dropZoneRef, {
  onDrop,
  // specify the types of data to be received.
  dataTypes: ['image/jpeg']
})
</script>

<template>
  <div ref="dropZoneRef">
    Drop files here
  </div>
</template>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Neo Fu
Luka Bagic
aki77
Matthias Stiller
Julien Martin
Changelog
​
v10.6.0 on 11/9/2023
3f3f1 - feat: add dataTypes option (#3471)
v10.2.1 on 6/28/2023
6d4ef - feat: expose files as ref
17d8d - feat: expose more hooks
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.4 on 7/17/2022
2670e - fix: improve argument type (#1933)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.6.0 on 5/31/2022
d6407 - feat: new function (#1610)
useDraggable | VueUse

useDraggable
​
Category
Elements
Export Size
1.36 kB
Last Changed
3 weeks ago

Make elements draggable.

Demo
​

source

Check the floating boxes

👋 Drag me!
I am at 400, 80
Renderless component
Position persisted in sessionStorage
431, 150
👋 Drag here!
Handle that triggers the drag event
I am at 467, 240
Usage
​
html
<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {
  initialValue: { x: 40, y: 40 },
})
</script>

<template>
  <div ref="el" :style="style" style="position: fixed">
    Drag me! I am at {{x}}, {{y}}
  </div>
</template>
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseDraggable :initialValue="{ x: 10, y: 10 }" v-slot="{ x, y }">
  Drag me! I am at {{x}}, {{y}}
</UseDraggable>

For component usage, additional props storageKey and storageType can be passed to the component and enable the persistence of the element position.

html
<UseDraggable storage-key="vueuse-draggable" storage-type="session">
  Refresh the page and I am still in the same position!
</UseDraggable>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
丶远方
webfansplz
Shigma
huiliangShen
Jessé Correia Lins
faga
vaakian X
Akiho Nagao
stefnotch
btea
guolao
vaakian X
Jelf
donotloveshampo
Julian Meinking
Jukka Raimovaara
wheat
Changelog
​
v10.6.0 on 11/9/2023
08246 - fix: element can't relative parent element move (#3531)
v10.4.0 on 8/25/2023
c08e5 - feat: allowing calculations of bounds with fixed element (#3335)
v10.2.0 on 6/16/2023
6b670 - feat: improve component props (#3075)
v10.0.0-beta.4 on 4/13/2023
3996d - feat: support capture option (#2725)
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.3 on 4/13/2023
0842a - feat: introduce axis option (#2948)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
e39c2 - fix: write to useStorage (#2575)
v9.7.0 on 12/16/2022
c9186 - fix: use clientX instead of pageX, close #2053 (#2054)
v9.2.0 on 9/5/2022
33587 - feat: support customizing trigger element (#2133)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.6.0 on 5/31/2022
5e315 - fix: should pass the stopPropagation option for component (#1620)
useDocumentVisibility | VueUse

useDocumentVisibility
​
Category
Elements
Export Size
542 B
Last Changed
2 months ago

Reactively track document.visibilityState

Demo
​

source

💡 Minimize the page or switch tab then return
Usage
​
js
import { useDocumentVisibility } from '@vueuse/core'

const visibility = useDocumentVisibility()
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseDocumentVisibility v-slot="{ visibility }">
  Document Visibility: {{ visibility }}
</UseDocumentVisibility>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Antério Vieira
vaakian X
Jelf
Shinigami
wheat
Alex Kozack
Scott Bedard
Changelog
​
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
useActiveElement | VueUse

useActiveElement
​
Category
Elements
Export Size
712 B
Last Changed
4 months ago

Reactive document.activeElement

Demo
​

source

Select the inputs below to see the changes
Current Active Element: null
Usage
​
js
import { useActiveElement } from '@vueuse/core'

const activeElement = useActiveElement()

watch(activeElement, (el) => {
  console.log('focus changed to', el)
})
Component Usage
​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseActiveElement v-slot="{ element }">
  Active element is {{ element.dataset.id }}
</UseActiveElement>
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Dominik Pschenitschni
duoduoObama
vaakian X
James Garbutt
vaakian X
wheat
Alex Kozack
Changelog
​
v10.3.0 on 7/30/2023
296dc - feat: search deeply in shadow dom (#3208)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.10.0 on 1/3/2023
07f20 - feat: support shadow roots (#2592)
ae78d - fix: ignore if relatedTarget is set (#2600)
v9.7.0 on 12/16/2022
88b44 - fix: ignore blur for relatedTarget (#2540)
v9.1.1 on 8/23/2022
c534e - fix: use computedWithControl instead of counter ref (#2093)
useThrottledRefHistory | VueUse

useThrottledRefHistory
​
Category
State
Export Size
1.73 kB
Last Changed
last year
Related
useDebouncedRefHistory
useRefHistory

Shorthand for useRefHistory with throttled filter.

Demo
​

source

Count: 0
IncrementDecrement/UndoRedo
Delay (in ms):



History (limited to 10 records for demo)
2023-11-28 22:16:19{ value: 0 }
Usage
​

This function takes the first snapshot right after the counter's value was changed and the second with a delay of 1000ms.

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

const counter = ref(0)
const { history, undo, redo } = useThrottledRefHistory(counter, { deep: true, throttle: 1000 })
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Roman Harmyder
Jelf
Bodo Graumann
wheat
Changelog
​
No recent changes
useStorageAsync | VueUse

useStorageAsync
​
Category
State
Export Size
1.63 kB
Last Changed
8 months ago
Related
useStorage

Reactive Storage in with async support.

Usage
​

Please refer to useStorage

Source
​

Source • Docs

Contributors
​
Anthony Fu
Jelf
丶远方
Wu Rui
ntnyq
Waldi
Andreas Weber
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.13.0 on 2/18/2023
105f4 - fix: handle mergeDefaults option (#2773)
v8.9.3 on 7/14/2022
ab332 - fix!: rename type StorageAsyncOptions to UseStorageAsyncOptions (#1883)
499f6 - fix(useStorage)!: rename type StorageOptions to UseStorageOptions (#1867)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useSessionStorage | VueUse

useSessionStorage
​
Category
State
Export Size
2.03 kB
Last Changed
7 months ago
Related
useStorage

Reactive SessionStorage.

Usage
​

Please refer to useStorage

Source
​

Source • Docs

Contributors
​
Anthony Fu
Antério Vieira
ntnyq
Jelf
Shinigami
Pig Fang
Alex Kozack
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.3 on 7/14/2022
499f6 - fix(useStorage)!: rename type StorageOptions to UseStorageOptions (#1867)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useDebouncedRefHistory | VueUse

useDebouncedRefHistory
​
Category
State
Export Size
1.7 kB
Last Changed
8 months ago
Related
useRefHistory
useThrottledRefHistory

Shorthand for useRefHistory with debounced filter.

Demo
​

source

Count: 0
IncrementDecrement/UndoRedo
Delay (in ms):



History (limited to 10 records for demo)
2023-11-28 22:16:15{ value: 0 }
Usage
​

This function takes a snapshot of your counter after 1000ms when the value of it starts to change.

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

const counter = ref(0)
const { history, undo, redo } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
Roman Harmyder
wheat
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)
useLocalStorage | VueUse

useLocalStorage
​
Category
State
Export Size
2.02 kB
Last Changed
8 months ago
Related
useStorage

Reactive LocalStorage.

Usage
​

Please refer to useStorage

Source
​

Source • Docs

Contributors
​
Anthony Fu
Antério Vieira
ntnyq
Jelf
Shinigami
Pig Fang
Alex Kozack
Changelog
​
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
v8.9.3 on 7/14/2022
499f6 - fix(useStorage)!: rename type StorageOptions to UseStorageOptions (#1867)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
useAsyncState | VueUse

useAsyncState
​
Category
State
Export Size
1.17 kB
Last Changed
7 months ago

Reactive async state. Will not block your setup function and will trigger changes once the promise is ready. The state is a shallowRef by default.

Demo
​

source

Ready: false
Loading: true
{}

Execute
Usage
​
ts
import axios from 'axios'
import { useAsyncState } from '@vueuse/core'

const { state, isReady, isLoading } = useAsyncState(
  axios
    .get('https://jsonplaceholder.typicode.com/todos/1')
    .then(t => t.data),
  { id: null },
)
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
丶远方
Flamenco
machete
Jules Raffoux
hfutsora
Brain777777
Mao Mr
Jelf
Sergey Shumov
lsdsjy
IIFelix
Alex Francev
webfansplz
Shinigami
Shahar Kosti
Alex Kozack
ordago
Jacob Clevenger
Antério Vieira
Changelog
​
v10.1.0 on 4/22/2023
d4db0 - feat: add support directly await (#3004)
v10.0.0-beta.1 on 3/23/2023
b636f - fix: fix toThrowError error type (#2898)
v9.13.0 on 2/18/2023
b4c63 - feat: get a promise function parameter type declaration (#2765)
v9.9.0 on 12/23/2022
ed64f - feat: add onSuccess callbacks (#2562)
v9.0.0-beta.2 on 7/24/2022
837b6 - feat: add throwError option (#1975)
v8.9.2 on 7/12/2022
24ede - fix!: rename type AsyncStateOptions to UseAsyncStateOptions (#1809)
useArrayFindIndex | VueUse

useArrayFindIndex
​
Category
Array
Export Size
136 B
Last Changed
2 months ago

Reactive Array.findIndex

Usage
​
Use with array of multiple refs
​
js
import { useArrayFindIndex } 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 = useArrayFindIndex(list, i => i % 2 === 0)
// result.value: 0
item1.value = 1
// result.value: 1
Use with reactive array
​
js
import { useArrayFindIndex } from '@vueuse/core'

const list = ref([0, 2, 4, 6, 8])
const result = useArrayFindIndex(list, i => i % 2 === 0)
// result.value: 0
list.value.unshift(-1)
// result.value: 1
Source
​

Source • Docs

Contributors
​
Anthony Fu
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
v9.0.0-beta.2 on 7/24/2022
c1520 - feat: new function (#1973)
useArrayIncludes | VueUse

useArrayIncludes
​
Category
Array
Export Size
340 B
Last Changed
2 months ago

Reactive Array.includes

Usage
​
Use with reactive array
​
js
import { useArrayIncludes } from '@vueuse/core'

const list = ref([0, 2, 4, 6, 8])
const result = useArrayIncludes(list, 10)
// result.value: false
list.value.push(10)
// result.value: true
list.value.pop()
// result.value: false
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
v10.0.0-beta.0 on 3/14/2023
4d6bc - feat: new function (#2708)
useArrayFindLast | VueUse

useArrayFindLast
​
Category
Array
Export Size
191 B
Last Changed
2 months ago

Reactive Array.findLast.

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

const list = [ref(1), ref(-1), ref(2)]
const positive = useArrayFindLast(list, val => val > 0)
// positive.value: 2
Use with reactive array
​
js
import { useArrayFindLast } from '@vueuse/core'

const list = reactive([-1, -2])
const positive = useArrayFindLast(list, val => val > 0)
// positive.value: undefined
list.push(10)
// positive.value: 10
list.push(5)
// positive.value: 5
Source
​

Source • Docs

Contributors
​
Anthony Fu
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.13.0 on 2/18/2023
b0ac4 - feat: new function (#2471)
useArrayFind | VueUse

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

Reactive Array.find.

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

const list = [ref(1), ref(-1), ref(2)]
const positive = useArrayFind(list, val => val > 0)
// positive.value: 1
Use with reactive array
​
js
import { useArrayFind } from '@vueuse/core'

const list = reactive([-1, -2])
const positive = useArrayFind(list, val => val > 0)
// positive.value: undefined
list.push(1)
// positive.value: 1
Source
​

Source • Docs

Contributors
​
Anthony Fu
vaakian X
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
d00b7 - feat: new function (#1875)
useArrayFilter | VueUse

useArrayFilter
​
Category
Array
Export Size
132 B
Last Changed
2 months ago

Reactive Array.filter

Usage
​
Use with array of multiple refs
​
js
import { useArrayFilter } 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 = useArrayFilter(list, i => i % 2 === 0)
// result.value: [0, 2, 4, 6, 8]
item2.value = 1
// result.value: [0, 4, 6, 8]
Use with reactive array
​
js
import { useArrayFilter } from '@vueuse/core'

const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
const result = useArrayFilter(list, i => i % 2 === 0)
// result.value: [0, 2, 4, 6, 8]
list.value.shift()
// result.value: [2, 4, 6, 8]
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.3 on 7/14/2022
50e35 - feat: new function (#1905)
useThrottleFn | VueUse

useThrottleFn
​
Category
Utilities
Export Size
401 B
Last Changed
2 months ago
Related
refDebounced
refThrottled
useDebounceFn

Throttle execution of a function. Especially useful for rate limiting execution of handlers on events like resize and scroll.

Throttle is a spring that throws balls: after a ball flies out it needs some time to shrink back, so it cannot throw any more balls unless it's ready.

Demo
​

source

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

Button clicked: 0

Event handler called: 0

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

const throttledFn = useThrottleFn(() => {
  // do something, it will be called at most 1 time per second
}, 1000)

window.addEventListener('resize', throttledFn)
Recommended Reading
​
Debounce vs Throttle: Definitive Visual Guide
Source
​

Source • Demo • Docs

Contributors
​
Anthony Fu
丶远方
vaakian X
azaleta
webfansplz
Jakub Freisler
Roman Harmyder
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)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)
v8.9.0 on 7/6/2022
a76b2 - fix: trailing option should be false by default (#1687)
createEventHook | VueUse

createEventHook
​
Category
Utilities
Export Size
212 B
Last Changed
3 weeks ago

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

useArrayUnique
​
Category
Array
Export Size
215 B
Last Changed
2 months ago

reactive unique array

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

const item1 = ref(0)
const item2 = ref(1)
const item3 = ref(1)
const item4 = ref(2)
const item5 = ref(3)
const list = [item1, item2, item3, item4, item5]
const result = useArrayUnique(list)
// result.value: [0, 1, 2, 3]
item5.value = 1
// result.value: [0, 1, 2]
Use with reactive array
​
js
import { useArrayUnique } from '@vueuse/core'

const list = reactive([1, 2, 2, 3])
const result = useArrayUnique(list)
// result.value: [1, 2, 3]

list.push(1)
// result.value: [1, 2, 3]
Use with custom function
​
js
import { useArrayUnique } from '@vueuse/core'

const list = reactive([
  { id: 1, name: 'foo' },
  { id: 2, name: 'bar' },
  { id: 1, name: 'baz' },
])

const result = useArrayUnique(list, (a, b) => a.id === b.id)
// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]

list.push({ id: 1, name: 'qux' })
// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
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
v10.0.0-beta.2 on 3/28/2023
c8c30 - feat: add a custom function to deduplicate (#2612)
v9.10.0 on 1/3/2023
162cd - feat: new function (#2597)
useArrayJoin | VueUse

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

Reactive Array.join

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

const item1 = ref('foo')
const item2 = ref(0)
const item3 = ref({ prop: 'val' })
const list = [item1, item2, item3]
const result = useArrayJoin(list)
// result.value: foo,0,[object Object]
item1.value = 'bar'
// result.value: bar,0,[object Object]
Use with reactive array
​
js
import { useArrayJoin } from '@vueuse/core'

const list = ref(['string', 0, { prop: 'val' }, false, [1], [[2]], null, undefined, []])
const result = useArrayJoin(list)
// result.value: string,0,[object Object],false,1,2,,,
list.value.push(true)
// result.value: string,0,[object Object],false,1,2,,,,true
list.value = [null, 'string', undefined]
// result.value: ,string,
Use with reactive separator
​
js
import { useArrayJoin } from '@vueuse/core'

const list = ref(['string', 0, { prop: 'val' }])
const separator = ref()
const result = useArrayJoin(list, separator)
// result.value: string,0,[object Object]
separator.value = ''
// result.value: string0[object Object]
separator.value = '--'
// result.value: string--0--[object Object]
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
dea1d - feat: new function (#1904)
useArrayMap | VueUse

useArrayMap
​
Category
Array
Export Size
133 B
Last Changed
2 months ago

Reactive Array.map

Usage
​
Use with array of multiple refs
​
js
import { useArrayMap } 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 = useArrayMap(list, i => i * 2)
// result.value: [0, 4, 8, 12, 16]
item1.value = 1
// result.value: [2, 4, 8, 12, 16]
Use with reactive array
​
js
import { useArrayMap } from '@vueuse/core'

const list = ref([0, 1, 2, 3, 4])
const result = useArrayMap(list, i => i * 2)
// result.value: [0, 2, 4, 6, 8]
list.value.pop()
// result.value: [0, 2, 4, 6]
Source
​

Source • Docs

Contributors
​
Anthony Fu
Young
plylrnsdy
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.2.0 on 9/5/2022
bc84e - fix: allow return type matches the mapper function (#2172)
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.3 on 7/14/2022
4afcb - feat: new function (#1908)
useArrayEvery | VueUse

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

Reactive Array.every

Usage
​
Use with array of multiple refs
​
js
import { useArrayEvery } 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 = useArrayEvery(list, i => i % 2 === 0)
// result.value: true
item1.value = 1
// result.value: false
Use with reactive array
​
js
import { useArrayEvery } from '@vueuse/core'

const list = ref([0, 2, 4, 6, 8])
const result = useArrayEvery(list, i => i % 2 === 0)
// result.value: true
list.value.push(9)
// result.value: false
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
b3228 - feat: new function (#1915)
toValue | VueUse

toValue
​
Category
Reactivity
Export Size
92 B
Last Changed
8 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)
useArrayDifference | VueUse

useArrayDifference
​
Category
Array
Export Size
231 B
Last Changed
2 months ago

Reactive get array difference of two array

Usage
​
Use with reactive array
​
js
import { useArrayDifference } from '@vueuse/core'

const list1 = ref([0, 1, 2, 3, 4, 5])
const list2 = ref([4, 5, 6])
const result = useArrayDifference(list1, list2)
// result.value: [0, 1, 2, 3]
list2.value = [0, 1, 2]
// result.value: [3, 4, 5]
Use with reactive array and use function comparison
​
js
import { useArrayDifference } from '@vueuse/core'

const list1 = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }])
const list2 = ref([{ id: 4 }, { id: 5 }, { id: 6 }])

const result = useArrayDifference(list1, list2, (value, othVal) => value.id === othVal.id)
// result.value: [{ id: 1 }, { id: 2 }, { id: 3 }]
Source
​

Source • Docs

Contributors
​
Anthony Fu
simpleoo0o
Lee Dogyeong
丶远方
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
v10.0.0-beta.1 on 3/23/2023
41858 - fix: error with falsey (#2869)
v10.0.0-beta.0 on 3/14/2023
a2a33 - feat: new function (#2710)
toRefs | VueUse

toRefs
​
Category
Reactivity
Export Size
451 B
Last Changed
4 months ago

Extended toRefs that also accepts refs of an object.

Usage
​
ts
import { toRefs } from '@vueuse/core'
import { reactive, ref } from 'vue'

const objRef = ref({ a: 'a', b: 0 })
const arrRef = ref(['a', 0])

const { a, b } = toRefs(objRef)
const [a, b] = toRefs(arrRef)

const obj = reactive({ a: 'a', b: 0 })
const arr = reactive(['a', 0])

const { a, b } = toRefs(obj)
const [a, b] = toRefs(arr)
Use-cases
​
Destructuring a props object
​
html
<template>
  <div>
    <input v-model="a" type="text" />
    <input v-model="b" type="text" />
  </div>
</template>

<script lang="ts">
import { toRefs, useVModel } from '@vueuse/core'

export default {
  setup(props) {
    const refs = toRefs(useVModel(props, 'data'))

    console.log(refs.a.value) // props.data.a
    refs.a.value = 'a' // emit('update:data', { ...props.data, a: 'a' })

    return { ...refs }
  }
}
</script>
Source
​

Source • Docs

Contributors
​
Anthony Fu
丶远方
Kasper Seweryn
ByMykel
vaakian X
chaii3
webfansplz
William T. Kirby
Changelog
​
v10.3.0 on 7/30/2023
5309c - fix: don't trigger unwanted watchEffects (#3260)
v10.2.1 on 6/28/2023
9f998 - fix: fix stack overflow caused by recursive setPrototypeOf (#3166)
toReactive | VueUse

toReactive
​
Category
Reactivity
Export Size
242 B
Last Changed
4 months ago

Converts ref to reactive. Also made possible to create a "swapable" reactive object.

This function uses Proxy

It is NOT supported by IE 11 or below.

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

const refState = ref({ foo: 'bar' })

console.log(refState.value.foo) // => 'bar'

const state = toReactive(refState) // <--

console.log(state.foo) // => 'bar'

refState.value = { bar: 'foo' }

console.log(state.foo) // => undefined
console.log(state.bar) // => 'foo'
Source
​

Source • Docs

Contributors
​
Anthony Fu
三咲智子 Kevin Deng
丶远方
Changelog
​
v10.3.0 on 7/30/2023
17a72 - fix(reactiveComputed): unwrap reactive type (#3215)