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.
A small sample of these utilities enables you to:
- use the clipboard API (demo below)
- reactive time ago (demo below)
- watch debounced or throttled
- create virtual lists with ease
- create fancy favicons or page titles
- track window size and focus
- track the visibility of an element within the viewport
- create a zone where files can be dropped (demo below)
- make elements draggable
- create reactive LocalStorage/SessionStorage
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.
Examples
Letโs explore some examples from the official VueUse docs.
Dropzone
Creates a zone where files can be dropped.
<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>
Clipboard
Reactive Clipboard API.
import { useClipboard } from '@vueuse/core'
const source = ref('Hello')
const {
text,
copy,
copied,
isSupported
} = useClipboard({ source })
<button @click='copy()'>
<!-- by default, `copied` will be reset in 1.5s -->
<span v-if='!copied'>Copy</span>
<span v-else>Copied!</span>
</button>
Click outside utility
Listen for clicks outside of an element.
<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
Parallax
_Create a parallax effect. It uses useDeviceOrientation and fallback to useMouse if orientation is not supported.
WatchDebounced
Something that you definitely have implemented in the past. A debounced watch.
import { watchDebounced } from '@vueuse/core'
watchDebounced(
source,
() => { console.log('changed!') },
{ debounce: 500, maxWait: 1000 },
)
WatchDebounced interactive demo
TimeAgo
import { useTimeAgo } from '@vueuse/core'
const timeAgo = useTimeAgo(new Date(2021, 0, 1))
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 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 โ๏ธ).
Top comments (2)
Excellent job
๐๐ผ๐๐ผ๐๐ผ