← Back to archive

Repo of the Day

vueuse/vueuse

Published: Sep 16, 2021

Open repository ↗

Summary

VueUse is a collection of composable utility functions for Vue 3, written in TypeScript. It bundles common reactive helpers like state tracking, sensor access, and persistence into a single library that engineers can drop into any Vue 3 project.

What it is useful for

VueUse helps engineers avoid re-implementing the same reactive primitives across Vue 3 applications. It covers common needs such as reading the mouse position, detecting the user's dark-mode preference, and persisting state to localStorage, all exposed as composition API functions. The library is tree-shakeable, so only the helpers you import end up in your bundle, and it works in SSR setups as well as plain browser builds via CDN. Optional add-ons extend the core with integrations for Router, Firebase, and RxJS when a project needs them.

How engineers can use it

The documented install command is npm i @vueuse/core, with no extra setup beyond a standard Vue 3 project. The README notes that v14.0 requires Vue v3.5 or higher, and from v12.0 onward Vue 2 is no longer supported, so projects on older Vue versions need to pin to v11.x. Typical usage in a component's <script setup> block looks like:

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

const { x, y } = useMouse()
const isDark = usePreferredDark()
const store = useLocalStorage('my-storage', { name: 'Apple', color: 'red' })

Each call returns reactive refs that can be read directly or bound in templates. For projects without a build step, the README documents a CDN option that loads @vueuse/shared and @vueuse/core from unpkg and exposes everything globally as window.VueUse. Engineers who want the full function list, interactive demos, and configuration details (such as event filters and target elements) are pointed to the project documentation site. Starter templates are also linked in the README for Vite + Vue 3, Nuxt 3, and Webpack + Vue 3 setups.

Documented limitation: from v12.0 there is no Vue 2 support; use v11.x if you are still on Vue 2.