Collection of essential Vue Composition Utilities

• 🎪 Interactive docs & demos
• 🕶 Seamless migration: Works for both Vue 3 and 2
• ⚡ Fully tree shakable: 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.

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

Refer to functions list or documentations for more details.

🎩 From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!

npm i @vueuse/core

Vue 3 Demo: Vite, Webpack / Vue 2 Demo: Vue CLI

From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

<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

See the Contributing Guide

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!

MIT License © 2019-PRESENT Anthony Fu