Javascript is required
Michael Hoffmann LogoMichael Hoffmann

Vue Tip: Use VueUse to Unleash the Power of Utility Functions

Michael Hoffmann - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Jul 26, 2023
1 min read
|
3 views
Script
Composables
Vue Tip: Use VueUse to Unleash the Power of Utility Functions Image

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:

bash
npm i @vueuse/core
Info

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:

Component.vue
1
<script setup>
2
import { useClipboard } from '@vueuse/core'
3
4
const source = ref('Something you need to copy')
5
const { 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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:

New Vue & Nuxt tips delivered to your inbox:
I will never share any of your personal data.