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 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
  • 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 border box
  • useShare — reactive Web Share API

• 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

  • 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
  • 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
  • useWindowScroll — reactive window scroll
  • useWindowSize — reactive window size

• Side Effects

  • useDebounce — debounce execution of a ref value
  • useDebounceFn — debounce execution of a function
  • useThrottle — throttle changing of a ref value
  • useThrottleFn — throttle execution of a function

• State

  • createGlobalState — keep state in global scope to be reused across Vue instances
  • useAsyncState — reactive async state
  • useCounter — basic counter with utility functions
  • useIdle — tracks whether user is being inactive
  • useLocalStorage — reactive LocalStorage
  • useSessionStorage — reactive SessionStorage
  • useStorage — reactive LocalStorage/SessionStorage

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 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.

• 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