@vueuse/shared v10.9.0
🚀 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 through CDN
- 🎪 Interactive docs & demos: Check out the Storybook!
- 🔌 Optional Add-ons
🦄 Usage
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.
📦 Install
🎩 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
CDN
<script src="https://unpkg.com/@vueuse/core"></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 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
— promised one-time watch for ref changes
More functions to be added. Please stay tuned. (PRs are also welcome!)
Meanwhile, try also vue-composable by @pikax!
🔌 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.
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
Integrations (
@vueuse/integrations
) - Integration wrappers for utility librariesuseAxios
— wrapper foraxios
useCookies
— wrapper foruniversal-cookie
module (similar to react-cookie)
🧱 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
2 months ago
2 months ago
4 months ago
4 months ago
5 months ago
8 months ago
8 months ago
9 months ago
6 months ago
6 months ago
7 months ago
10 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago