Collection of essential Vue Composition API (inspired by react-use)
π Features
β‘ 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
π¦ Usage
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.
π¦ Install
vue-next), (Demo: Vite, Webpack)
for Vue 3 (npm i @vueuse/core@vue3
composition-api polyfill
for Vue 2 withnpm i @vueuse/core@vue2 @vue/composition-api
Please register the Composition API Plugin before using APIs.
CDN
<!-- 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
β‘ Functions
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!)
π Add-ons
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
π¬ Technical Details
The Versioning
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.
Different between 3.x and 2.x
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'
𧱠Contribute
See the Contributing Guide
πΈ Thanks
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!
π¨βπ Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
π License
MIT License Β© 2019-2020 Anthony Fu