VueUse is a collection of utility functions based on Composition API. It provides a set of essential utilities for interacting with various browsers, sensors, animations, and state APIs, and more:
- State
- Elements
- Browser
- Sensors
- Network
- Animation
- Component
- Watch
- Reactivity
- Array
- Time
- Utilities
Additionally, it provides Add-ons for Electron, Firebase, and more.
Installation
You can simply install it by running:
npm i @vueuse/coreInfo
From v4.0, it works for Vue 2 & 3 within a single package.
For more information, check the official documentation.
Usage
Let's take a look at how VueUse can help us in our daily work by using the useClipboard composable:
1<script setup>
2import { useClipboard } from '@vueuse/core'
3
4const source = ref('Something you need to copy')
5const { text, copy, copied, isSupported } = useClipboard({ source })
6</script>As you can see, it’s a great way to save time in development because you don’t have to add all of this standard functionality on your own.
You can use the VueUse playground to experiment with the library as much as you want.
Advice
I would strongly encourage you to use VueUse in your projects. It will save you a lot of time and effort.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Emit Event From Composable
Your application may contain a lot of components that are using the same logic, like emitting the same event. In this case, it might be tempting to create a composable that will emit this event and is used in all components. But how do you emit an event from inside a composable?
Vue Tip: Dynamic Return Values in Composables
FIXME