Collection of essential Vue Composition Utilities
- 🎪 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.
import{useLocalStorage,useMouse,usePreferredDark}from'@vueuse/core'exportdefault{setup(){// tracks mouse positionconst{ x, y }=useMouse()// is user prefers dark themeconstisDark=usePreferredDark()// persist state in localStorageconststore=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/coreFrom v6.0, VueUse requires
vue>= v3.2 or@vue/composition-api>= v1.1
<scriptsrc="https://unpkg.com/@vueuse/shared"></script><scriptsrc="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.
And thanks to all the contributors on GitHub!
MIT License © 2019-PRESENT Anthony Fu