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