DEV Community

Cover image for VueUse - The library that makes Vue 3 worth the upgrade
Fotis Adamakis
Fotis Adamakis

Posted on • Updated on • Originally published at Medium

VueUse - The library that makes Vue 3 worth the upgrade

Composition API 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 is a collection of 200+ essential utility functions for interacting with various APIs like browser, state, network, animation, time and more.

Image description

A small sample of these utilities enables you to:

and so many more!

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:

More information about VueUse addons here.


Letโ€™s explore some examples from the official VueUse docs.


Creates a zone where files can be dropped.

Dropzone demo

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

  <div ref="dropZoneRef">
    Drop files here
Enter fullscreen mode Exit fullscreen mode

Dropzone interactive demo


Reactive Clipboard API.

Clipboard demo

import { useClipboard } from '@vueuse/core'

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

Clipboard interactive demo

Click outside utility

Listen for clicks outside of an element.

Click outside demo

  <div ref="target">
    Hello world
    Outside element

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

Click outside interactive demo


_Create a parallax effect. It uses useDeviceOrientation and fallback to useMouse if orientation is not supported.

Parallax demo

Parallax interactive demo


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

Debounced demo

import { watchDebounced } from '@vueuse/core'

  () => { console.log('changed!') },
  { debounce: 500, maxWait: 1000 },
Enter fullscreen mode Exit fullscreen mode

WatchDebounced interactive demo


TimeAgo demo

import { useTimeAgo } from '@vueuse/core'

const timeAgo = useTimeAgo(new Date(2021, 0, 1))
Enter fullscreen mode Exit fullscreen mode

useTimeAgo interactive demo


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 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, spread the word and maybe give the author a credit (or buy him a coffee โ˜•๏ธ).

Vue Use

Top comments (2)

michaelsynan profile image
Michael Synan

Excellent job

alinasir profile image
Ali Nasir