VueUse - The library that makes Vue 3 worth the upgrade
Tags: vue
Published: 2022-08-15 13:24:00


[Composition API](https://vuejs.org/guide/extras/composition-api-faq.html) promotes a much better paradigm of sharing code between components. Explicit dependencies and namespacing by design enable us to share code even between different projects. This is the main idea behind VueUse.

[**VueUse**](https://vueuse.org/) is a collection of 200+ essential utility functions for interacting with various APIs like browser, state, network, animation, time and more.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96qvw89caas76hiwoigm.png)

A small sample of these utilities enables you to:

*   [_use the clipboard API_](https://vueuse.org/core/useClipboard/) _(demo below)_
*   [_reactive time ago_](https://vueuse.org/core/useTimeAgo/) _(demo below)_
*   _watch_ [_debounced_](https://vueuse.org/shared/watchDebounced/) _or_ [_throttled_](https://vueuse.org/shared/watchThrottled/)
*   [_create virtual lists with ease_](https://vueuse.org/core/useVirtualList/)
*   _create fancy_ [_favicons_](https://vueuse.org/core/useFavicon/) _or_ [_page titles_](https://vueuse.org/core/useTitle/)
*   [_track window size_](https://vueuse.org/core/useWindowSize/) _and_ [_focus_](https://vueuse.org/core/usewindowfocus/)
*   [_track the visibility of an element within the viewport_](https://vueuse.org/core/useElementVisibility/)
*   [_create a zone where files can be dropped_](https://vueuse.org/core/useDropZone/) _(demo below)_
*   [_make elements draggable_](https://vueuse.org/core/useDraggable/)
*   [_create reactive_](https://vueuse.org/core/useStorage/)  [_LocalStorage_](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)_/_[_SessionStorage_](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)

and [so many more](https://vueuse.org/functions.html)!

Extensible with add-ons
-----------------------

The core package aims to be lightweight and dependence free. Integration with popular packages is supported using add-ons. This ensures a consistent API style.

Some existing add-ons currently are:

*   [_Electron_](https://vueuse.org/functions.html#category=%40Electron)
*   [_Firebase_](https://vueuse.org/functions.html#category=%40Firebase)
*   [_Motion_](https://vueuse.org/functions.html#category=%40Motion)
*   [_RxJS_](https://vueuse.org/functions.html#category=%40RxJS)
*   [_Sound_](https://vueuse.org/functions.html#category=%40Sound)

More information about [VueUse addons here](https://vueuse.org/add-ons.html).

## Examples

Let’s explore some examples from the official [VueUse docs](https://vueuse.org/).

Dropzone
--------

_Creates a zone where files can be dropped._

![Dropzone demo](https://miro.medium.com/max/720/1*yvnfJLW3Z5Hz52p5L9NbnA.gif)


```js
<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)
</script>

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

[Dropzone interactive demo](https://vueuse.org/core/useDropZone/#demo)

Clipboard
---------

_Reactive_ [_Clipboard API_](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)_._

![Clipboard demo](https://miro.medium.com/max/736/1*sZInD8CM1a8x4kYZ84qVFw.gif)

```js
import { useClipboard } from '@vueuse/core'

const source = ref('Hello')
const { 
    text, 
    copy, 
    copied, 
    isSupported 
} = useClipboard({ source })
```
```js
<button @click='copy()'>
  <!-- by default, `copied` will be reset in 1.5s -->
  <span v-if='!copied'>Copy</span>
  <span v-else>Copied!</span>
</button>
```

[Clipboard interactive demo](https://vueuse.org/core/useClipboard/)

Click outside utility
---------------------

_Listen for clicks outside of an element._

![Click outside demo](https://miro.medium.com/max/736/1*IoC1K7pvwj1eDvMUOg4qZw.gif)

```js
<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
export default {
  setup() {
    const target = ref(null)
    onClickOutside(target, (event) => console.log(event))
    return { target }
  }
}
</script>
```

[Click outside interactive demo](https://vueuse.org/core/onClickOutside/)

Parallax
--------

_Create a parallax effect. It uses [useDeviceOrientation](https://vueuse.org/core/useDeviceOrientation/) and fallback to [_useMouse_](https://vueuse.org/core/useMouse/) if orientation is not supported.

![Parallax demo](https://miro.medium.com/max/702/1*NOIYi9vgCZiLs5gdt2L6gA.gif)

[Parallax interactive demo](https://vueuse.org/core/useParallax/)

WatchDebounced
--------------

_Something that you definitely have implemented in the past. A debounced watch._

![Debounced demo](https://miro.medium.com/max/702/1*7BasZgCu8tscSaU3Ba7kvw.gif)

```js
import { watchDebounced } from '@vueuse/core'

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

[WatchDebounced interactive demo](https://vueuse.org/shared/watchdebounced/)

TimeAgo
-------

![TimeAgo demo](https://miro.medium.com/max/710/1*4e-l_wdXeCwuQEzEtoOmew.gif)

```js
import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))
```

[useTimeAgo interactive demo](https://vueuse.org/core/usetimeago/)

Conclusion
----------

We only touched the surface, but hopefully, you got the idea of how awesome this library is. There are hundreds of utilities to explore (currently 274!), and the number is constantly rising. Of course, you can [contribute](https://vueuse.org/contributing.html) your own If you find something’s missing.

Libraries like VueUse are leading the way to make Vue awesome again. They promote code reusability and improve the overall developer experience.

Dive into the [awesome documentation](https://vueuse.org/), spread the word and maybe give the author a credit ([or buy him a coffee](https://github.com/sponsors/antfu) ☕️).

![Vue Use](https://miro.medium.com/max/960/1*raBN2gZ7Vhp9rY0gzMFEvQ.png)