Collection of essential Vue Composition Utilities
π 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 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.
π¦ Install
π© From v4.0, it works for Vue 2 & 3 within a single package by the power of vue-demi!
npm i @vueuse/core
From v6.0, VueUse requires
vue
>= v3.2 or@vue/composition-api
>= v1.1
Demos
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.
And thanks to all the contributors on GitHub!
π¨βπ Contributors
Financial Contributors on Open Collective
π License
MIT License Β© 2019-PRESENT Anthony Fu