Collection of essential Vue Composition API (inspired by react-use)
- โก 0 dependencies: No worry about your bundle size
- ๐ด Fully tree shakable: Only take what you want
- ๐ฆพ Type Strong: Written in Typescript
- ๐ถ Seamless migration: Works for both Vue 3 and 2
- ๐ Browser compatible: Use it through CDN
- ๐ช Interactive docs & demos: Check out the Storybook!
- ๐ Optional Add-ons
import { defineComponent } from 'vue'
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'
const Component = defineComponent({
setup() {
// tracks mouse position
const { x, y } = useMouse()
// is user prefers dark theme
const isDark = usePreferredDark()
// persist state in localStorage
const state = useLocalStorage(
'my-storage',
{
name: 'Apple',
color: 'red',
},
)
return { x, y, isDark, state }
}
})
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 # yarn add @vueuse/core
Vue 3 Demo: Vite, Webpack / Vue 2 Demo: Vue CLI
<script src="https://unpkg.com/@vueuse/core"></script>
It will be exposed to global as window.VueUse
You can check out the full documents and live demos in Storybook.
-
Animation
useInterval
โ reactive counter increases on every intervaluseIntervalFn
โ simple wrapper forsetInterval
useNow
โ reactive current timestampuseRaf
โ reactive time elapsed on everyrequestAnimationFrame
useRafFn
โ call function on everyrequestAnimationFrame
useTimeout
โ update value after a given timeuseTimeoutFn
โ call function after a given timeuseTransition
โ transition between values
-
Browser
useBrowserLocation
โ reactive browser locationuseClipboard
โ reactive Clipboard APIuseCssVar
โ manipulate CSS variablesuseEventListener
โ use EventListener with easeuseFullscreen
โ reactive Fullscreen APIuseMediaQuery
โ reactive Media QueryuseMutationObserver
โ watch for changes being made to the DOM treeusePermission
โ reactive Permissions APIusePreferredColorScheme
โ reactive prefers-color-scheme media queryusePreferredDark
โ reactive dark theme preferenceusePreferredLanguages
โ reactive Navigator LanguagesuseResizeObserver
โ reports changes to the dimensions of an Element's content or the border-boxuseShare
โ reactive Web Share APIuseTitle
โ reactive document title
-
Misc
useEventSource
โ an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP serveruseWebSocket
โ reactive simple WebSocket clientuseWebWorker
โ simple Web Workers registration and communicationuseWebWorkerFn
โ run expensive function without blocking the UI
-
Sensors
onStartTyping
โ fires when users start typing on non-editable elementsuseBattery
โ reactive Battery Status APIuseDeviceLight
โ reactive DeviceLightEventuseDeviceMotion
โ reactive DeviceMotionEventuseDeviceOrientation
โ reactive DeviceOrientationEventuseDevicePixelRatio
โ reactively trackWindow.devicePixelRatio
useDocumentVisibility
โ reactively trackDocument.visibilityState
useElementVisibility
โ tracks the visibility of an element within the viewportuseGeolocation
โ reactive Geolocation APIuseIntersectionObserver
โ detects that a target element's visibilityuseMouse
โ reactive mouse positionuseMouseInElement
โ reactive mouse position in an elementuseNetwork
โ reactive Network statususeOnline
โ reactive online stateusePageLeave
โ reactive state to show whether mouse leaves the pageuseParallax
โ create parallax effect easilyuseWindowScroll
โ reactive window scrolluseWindowSize
โ reactive window size
-
State
asyncComputed
โ like computed refscreateGlobalState
โ keep states in the global scope to be reused across Vue instancesuseAsyncState
โ reactive async stateuseCounter
โ basic counter with utility functionsuseIdle
โ tracks whether the user is being inactiveuseLocalStorage
โ reactive LocalStorageuseRefHistory
โ track the change history of a refuseSessionStorage
โ reactive SessionStorageuseStorage
โ reactive LocalStorage/SessionStorage
-
Utilities
useDebounce
โ debounce execution of a ref valueuseDebounceFn
โ debounce execution of a functionuseThrottle
โ throttle changing of a ref valueuseThrottleFn
โ throttle execution of a functionwhen
โ await ref/reactive changes
More functions to be added. Please stay tuned. (PRs are also welcome!)
Meanwhile, try also vue-composable by @pikax!
The core package aims to be lightweight and dependence free. While the add-ons are wrapping popular packages into the consistent API style.
-
Firebase (
@vueuse/firebase
) - Enables realtime bindings for FirebaseuseFirestore
โ reactive Firestore bindinguseRTDB
โ reactive Firebase Realtime Database binding
-
RxJS (
@vueuse/rxjs
) - Enables RxJS reactive functions in Vuefrom
โ two wrappers around of the original functions to allow use ref objectstoObserver
โ sugar function to convert a ref in an observeruseObservable
โ use an ObservableuseSubscription
โ uses subscriptions without worry about unsubscribing to it or memory leaks
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
Thanks!
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
MIT License ยฉ 2019-2020 Anthony Fu