Guide · Open source

How to use VueUse: install @vueuse/core and common composables

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

VueUse is a collection of reusable functions, called composables, for Vue 3. It covers common browser tasks such as tracking mouse position, detecting a dark-mode preference, and saving state to localStorage. This guide shows how to install the core package, import the functions you need, and check which Vue version your project requires.

VueUsevueuse/vueuse · ★ 22.4k · MIT Install options & downloads

Quick start

1Confirm your Vue version. Check that your project uses Vue 3, and Vue 3.5 or later if you plan to install v14 or newer.
2Install the core package. Run npm i @vueuse/core in your project folder.
3Import the composables you need. Import named functions such as useMouse or useLocalStorage from @vueuse/core.
4Call the composable in your component. Assign the return value, for example const { x, y } = useMouse(), and use it in your template or logic.
5Check the function reference. Use the functions list at vueuse.org to find options and details for each composable.

What VueUse is and when to use it

VueUse is a code library, not a finished app. Developers import the composables they need instead of writing that browser logic from scratch.

It suits Vue 3 developers who repeat the same browser logic across projects, and teams building Vue apps with Vite, Nuxt, or Webpack. The README also lists typed, documented utilities and server-side rendering support as reasons to use it.

Best for: Vue 3 developers who repeat common browser logic across projects
Best for: teams building Vue apps with Vite, Nuxt, or Webpack
Not for: projects still on Vue 2, which should use v11.x instead
Not for: non-developers looking for a finished app

Check prerequisites before you install

You need Node.js and a Vue 3 project. Version requirements depend on which VueUse release you install. According to the README, v13 requires Vue 3.3 or later and v14 requires Vue 3.5 or later. Version 12 and later dropped Vue 2 support, so Vue 2 projects should use v11.x.

Node.js
Vue 3.5+ if you install v14 or later
Vue 3.3+ if you install v13
Vue 2: use v11.x

Install VueUse with npm

Install the core package from your project folder using the package-manager command shown in the README.

npm i @vueuse/core

Use composables in a component

Import the functions you need from @vueuse/core. Each composable returns reactive values you can use in your templates or logic. The README example uses useMouse to read x and y coordinates, usePreferredDark to detect a dark-theme preference, and useLocalStorage to persist an object under a key.

The README notes that VueUse is tree-shakeable, so you only include the functions you import. Refer to the functions list on the official site for the full set.

useMouse returns x and y positions
usePreferredDark tells you whether the user prefers a dark theme
useLocalStorage saves state under a key in localStorage

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

const { x, y } = useMouse()

// if user prefers dark theme
const isDark = usePreferredDark()

// persist state in localStorage
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)

Use VueUse without a bundler via CDN

If you do not use a bundler, the README shows how to load the scripts from unpkg. The library is then exposed globally as window.VueUse. Load the shared package before the core package.

<script src="https://unpkg.com/@vueuse/shared"></script>

<script src="https://unpkg.com/@vueuse/core"></script>

Find starter projects and extra integrations

The README links demo starters for Vite with Vue 3, Nuxt 3 with Vue 3, and Webpack with Vue 3. It also mentions optional add-ons such as Router, Firebase, and RxJS, plus a Nuxt Module. Browse the official documentation at vueuse.org for details on each function.

Vite + Vue 3 starter
Nuxt 3 + Vue 3 starter
Webpack + Vue 3 example
Add-ons: Router, Firebase, RxJS, and more

What people use it for

Track mouse position with useMouse for interactive interfaces
Detect a user's dark-mode preference with usePreferredDark
Save user settings or form state to localStorage with useLocalStorage
Load VueUse from a CDN in a simple page with no build step

Frequently asked questions

How do I install VueUse?

Run npm i @vueuse/core in your project folder. This installs the core package, which contains the composables you import into your Vue 3 components.

Does VueUse require Vue 3?

Yes, VueUse is built for Vue 3. The README says v12 and later no longer support Vue 2, so Vue 2 projects should use v11.x.

Which Vue version do I need for VueUse?

The README says v13 requires Vue 3.3+ and v14 requires Vue 3.5+. Check the release you install against your Vue version.

Is VueUse free to use?

VueUse is released under the MIT License, as stated in the README. See the LICENSE file in the repository for the full terms.

Does VueUse work with server-side rendering?

The README describes VueUse as SSR friendly. It also lists Nuxt support through a Nuxt Module and a Nuxt 3 starter.

How does VueUse compare to react-use or vue-hooks?

The README says VueUse was heavily inspired by react-use, vue-hooks, vue-use-web, and react-hooks. It does not compare features in detail, so check each project's documentation for specifics.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

VueUse is a good choice for Vue 3 developers who repeat common browser logic and want typed, documented composables that work with Vite, Nuxt, or Webpack. Skip it if your project still runs Vue 2, or if you need a finished app rather than a code library.

Install options & downloads