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
<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
- shuidi-fed/vue-composition-toolkit
- logaretm/vue-use-web
- kripod/react-hooks
And thanks to all the contributors on GitHub!
MIT License © 2019-PRESENT Anthony Fu