Collection of essential Vue Composition API (inspired by react-use)
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**
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 for setInterval
useNow
— reactive current timestampuseRaf
— reactive time elapsed on every requestAnimationFrame
useRafFn
— call function on every requestAnimationFrame
useTimeout
— update value after a given timeuseTimeoutFn
— call function after a given timeuseTransition
— transition between valuesBrowser
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 APIMisc
useWebSocket
— reactive simple WebSocket clientuseWebWorker
— simple Web Workers registration and communicationuseWebWorkerFn
— run expensive function without blocking the UISensors
useBattery
— reactive Battery Status APIuseDeviceLight
— reactive DeviceLightEventuseDeviceMotion
— reactive DeviceMotionEventuseDeviceOrientation
— reactive DeviceOrientationEventuseDocumentVisibility
— reactively track Document.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 sizeSide Effects
useDebounce
— debounce execution of a ref valueuseDebounceFn
— debounce execution of a functionuseThrottle
— throttle changing of a ref valueuseThrottleFn
— throttle execution of a functionState
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/SessionStorageMore 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-i18n
createI18n
— create a global i18n instance to be reuseduseI18n
— use vue-i18n instanceFirebase (@vueuse/firebase
) - enables realtime bindings for Firebase
* [`useFirestore`](https://vueuse.js.org/?path=/story/add-ons-firebase--usefirestore) — reactive [Firestore](https://firebase.google.com/docs/firestore) binding
* [`useRTDB`](https://vueuse.js.org/?path=/story/add-ons-firebase--usertdb) — reactive [Firebase Realtime Database](https://firebase.google.com/docs/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.
Thanks!
Author: antfu
Live Demo: https://vueuse.js.org/
GitHub: https://github.com/antfu/vueuse
#vuejs #vue #javascript #vue-js