Discovering VueUse: the essential toolkit for Vue.js

When developing a Vue application, you often end up rewriting the same things over and over:

• listening to browser events
• managing reactive state
• accessing Web APIs
• cleaning up listeners

This is precisely the problem VueUse solves.

A library of composables

VueUse is a massive library of ready-to-use composables for Vue.js.

It offers hundreds of utilities for:

• the browser
• animations
• sensors
• keyboard shortcuts
• local storage
• modern Web APIs

And above all, all the utilities are designed to work naturally with Vue's reactivity.

Installation is very simple:

npm install @vueuse/core

Then, you can import only the composables you need.

Copying text with useClipboard

The browser's clipboard API can be a bit painful to use directly.

VueUse simplifies this enormously with useClipboard.

import { useClipboard } from "@vueuse/core"

const { copy, copied } = useClipboard()

const copyCode = async () => {
  await copy("Hello world")
}

The copied boolean automatically becomes true for a few seconds after copying.

Perfect for displaying a message:

<p v-if="copied">Text copied!</p>

This is ideal for:

• “Copy” buttons
• code snippets
• share links
• API tokens

Getting the GPS position with useGeolocation

VueUse also offers very simple access to the browser's geolocation.

import { useGeolocation } from "@vueuse/core"

const { coords, locatedAt, error } = useGeolocation()

The coordinates automatically become reactive:

<p>Latitude: {{ coords.latitude }}</p>
<p>Longitude: {{ coords.longitude }}</p>

This is particularly useful for:

• an interactive map
• a weather application
• localized content
• location tracking

And unlike a manual implementation, VueUse already handles:

• listeners
• reactivity
• automatic cleanup

Detecting network status with useNetwork

Knowing whether a user is offline can greatly improve the user experience.

With useNetwork:

import { useNetwork } from "@vueuse/core"

const { isOnline, downlink, effectiveType } = useNetwork()

You can easily display a message:

<p v-if="!isOnline">
  You are currently offline.
</p>

But you can also adapt the application based on network quality.

For example:

• reducing image quality
• disabling certain animations
• avoiding heavy requests

Using a gamepad with useGamepad

This is probably one of the most fun composables.

useGamepad allows access to gamepads connected to the browser.

import { useGamepad } from "@vueuse/core"

const { gamepads } = useGamepad()

You can then read the buttons and axes:

<pre>{{ gamepads }}</pre>

This opens the door to a lot of projects:

• mini Vue.js games
• interactive interfaces
• touch kiosks
• alternative controls

And all this with very little code.