vueuse: A TypeScript repository from neelance

Collection of essential Vue Composition API (inspired by react-use)

🚀 Features

⚡ 0 dependencies: Don't 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 interval
- useIntervalFn — simple wrapper for setInterval
- useNow — reactive current timestamp
- useRaf — reactive time elapsed on every requestAnimationFrame
- useRafFn — call function on every requestAnimationFrame
- useTimeout — update value after a given time
- useTimeoutFn — call function after a given time
- useTransition — transition between values
Browser
- useBrowserLocation — reactive browser location
- useClipboard — reactive Clipboard API
- useCssVar — manipulate CSS variables
- useEventListener — use EventListener with ease
- useFavicon — reactive favicon
- useFullscreen — reactive Fullscreen API
- useMediaQuery — reactive Media Query
- useMutationObserver — watch for changes being made to the DOM tree
- usePermission — reactive Permissions API
- usePreferredColorScheme — reactive prefers-color-scheme media query
- usePreferredDark — reactive dark theme preference
- usePreferredLanguages — reactive Navigator Languages
- useResizeObserver — reports changes to the dimensions of an Element's content or the border-box
- useShare — reactive Web Share API
- useTitle — reactive document title
Misc
- useEventSource — an EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server
- useWebSocket — reactive simple WebSocket client
- useWebWorker — simple Web Workers registration and communication
- useWebWorkerFn — run expensive function without blocking the UI
Sensors
- onStartTyping — fires when users start typing on non-editable elements
- useBattery — reactive Battery Status API
- useDeviceLight — reactive DeviceLightEvent
- useDeviceMotion — reactive DeviceMotionEvent
- useDeviceOrientation — reactive DeviceOrientationEvent
- useDevicePixelRatio — reactively track Window.devicePixelRatio
- useDocumentVisibility — reactively track Document.visibilityState
- useElementVisibility — tracks the visibility of an element within the viewport
- useGeolocation — reactive Geolocation API
- useIdle — tracks whether the user is being inactive
- useIntersectionObserver — detects that a target element's visibility
- useMouse — reactive mouse position
- useMouseInElement — reactive mouse position in an element
- useNetwork — reactive Network status
- useOnline — reactive online state
- usePageLeave — reactive state to show whether mouse leaves the page
- useParallax — create parallax effect easily
- useSpeechRecognition — reactive SpeechRecognition
- useWindowScroll — reactive window scroll
- useWindowSize — reactive window size
State
- createGlobalState — keep states in the global scope to be reused across Vue instances
- useCounter — basic counter with utility functions
- useLocalStorage — reactive LocalStorage
- useSessionStorage — reactive SessionStorage
- useStorage — reactive LocalStorage/SessionStorage
Utilities
- asyncComputed — like computed refs
- biSyncRef — two-way refs synchronization
- controlledComputed — explicitly define the deps of computed
- extendRef — add extra attributes to Ref
- makeDestructurable — make isomorphic destructurable for object and array at the same time
- syncRef — keep target refs in sync with a source ref
- tryOnMounted — safe onMounted
- tryOnUnmounted — safe onUnmounted
- useAsyncState — reactive async state
- useDebounce — debounce execution of a ref value
- useDebounceFn — debounce execution of a function
- useRefHistory — track the change history of a ref
- useThrottle — throttle changing of a ref value
- useThrottleFn — throttle execution of a function
- when — 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.

Integrations (@vueuse/integrations) - Integration wrappers for utility libraries
- useAxios — wrapper for axios
- useCookies — wrapper for universal-cookie
- useQRCode — wrapper for qrcode
RxJS (@vueuse/rxjs) - Enables RxJS reactive functions in Vue
- from — two wrappers around of the original functions to allow use ref objects
- toObserver — sugar function to convert a ref in an observer
- useObservable — use an Observable
- useSubscription — uses subscriptions without worry about unsubscribing to it or memory leaks
Firebase (@vueuse/firebase) - Enables realtime bindings for Firebase
- useFirestore — reactive Firestore binding
- useRTDB — reactive Firebase Realtime Database binding

🧱 Contribute

See the Contributing Guide

🌸 Thanks

This project is heavily inspired by the following awesome projects.

Thanks!

👨‍🚀 Contributors

Code Contributors

This project exists thanks to all the people who contribute. How to Contribute.

Financial Contributors

Become a financial contributor and help us sustain our community. Contribute via Open Collective

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

neelance/vueuse