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 { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'
new Vue({
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.
npm i @vueuse/core@vue3
for Vue 2 with composition-api polyfill
npm i @vueuse/core@vue2 @vue/composition-api
Please register the Composition API Plugin before using APIs.
<!-- For Vue 3 -->
<script src="https://unpkg.com/@vueuse/core@vue3"></script>
<!-- For Vue 2 -->
<script src="https://unpkg.com/@vueuse/core@vue2"></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 DeviceOrientationEventuseDocumentVisibility
โ 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!)
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
For every release, it will release two versions of this package. The 3.x.x
is used for Vue 3 and the 2.x.x
is used for Vue 2. We use the major version number to distinguish the different target versions will the minor and patch numbers are shared in both packages.
For 3.x build, we use the API from @vue/runtime-dom
, and for 2.x, it's @vue/composition-api
. All the functions exported in this package behaves the same.
// 3.x build
import { ref } from '@vue/runtime-dom'
// 2.x build
import { ref } from '@vue/composition-api'
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