JSPM – @vueuse/core@4.0.0-beta.37

Package Exports

@vueuse/core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vueuse/core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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]

@vueuse/core