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 though CDN
- ๐ช Interactive docs & demos: Check out the Storybook!
- ๐ Optional Add-ons: Firebase, vue-i18n, etc
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 QueryusePermission
โ reactive Permissions APIusePreferredColorScheme
โ reactive prefers-color-scheme media queryusePreferredDark
โ reactive dark theme preferenceusePreferredLanguages
โ reactive Navigator LanguagesuseShare
โ reactive Web Share API
-
Misc
useWebSocket
โ reactive simple WebSocket clientuseWebWorker
โ simple Web Workers registration and communicationuseWebWorkerFn
โ run expensive function without blocking the UI
-
Sensors
useBattery
โ 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 APIuseMouse
โ 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
-
Side Effects
useDebounce
โ debounce execution of a ref valueuseDebounceFn
โ debounce execution of a functionuseThrottle
โ throttle changing of a ref valueuseThrottleFn
โ throttle execution of a function
-
State
createGlobalState
โ keep state in global scope to be reused across Vue instancesuseAsyncState
โ reactive async stateuseCounter
โ basic counter with utility functionsuseIdle
โ tracks whether user is being inactiveuseLocalStorage
โ reactive LocalStorageuseSessionStorage
โ reactive SessionStorageuseStorage
โ reactive LocalStorage/SessionStorage
More functions to be added. Please keep turned. (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.
-
๐ i18n (
@vueuse/i18n
) - Composition wrapper for vue-i18ncreateI18n
โ create a global i18n instance to be reuseduseI18n
โ use vue-i18n instance
-
๐ฅ Firebase (
@vueuse/firebase
) - Enables realtime bindings for FirebaseuseFirestore
โ reactive Firestore bindinguseRTDB
โ reactive Firebase Realtime Database binding
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