vueuse

Features

• Interactive docs & demos

• Seamless migration: Works for both Vue 3 and 2

• Fully tree shakeable: Only take what you want, bundle size

• Type Strong: Written in TypeScript, with TS Docs

• SSR Friendly

• No bundler required: Usable via CDN

• Flexible: Configurable event filters and targets

• Optional Add-ons: Router, Firebase, RxJS, etc.

Usage

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'export default {
  setup() {// tracks mouse positionconst { x, y } = useMouse()// if user prefers dark themeconst isDark = usePreferredDark()// persist state in localStorageconst store = useLocalStorage(  'my-storage',  {name: 'Apple',color: 'red',  },)return { x, y, isDark, store }
  },}

Refer to functions list or documentations for more details.

Install

From v12.0, VueUse no longer supports Vue 2. Please use v10.x for Vue 2 support.

npm i @vueuse/core

Add ons | Nuxt Module

Demos

• Vite + Vue 3

• Nuxt 3 + Vue 3

• Webpack + Vue 3

CDN

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

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

It will be exposed to global as window.VueUse

Project Activity

Contribute

See the Contributing Guide

Thanks

This project is heavily inspired by the following awesome projects.

• streamich/react-use

• u3u/vue-hooks

• logaretm/vue-use-web

• kripod/react-hooks

And thanks to all the contributors on GitHub!