VueUse

Collection of essential Vue Composition Utilities for Vue 2 and 3

VueUtils
vueuse/vueusevueuse.org@vueuse/core

README

VueUse - Collection of essential Vue Composition Utilities VueUse - Collection of essential Vue Composition Utilities


Collection of essential Vue Composition Utilities

NPM versionNPM DownloadsDocs & DemosFunction CountGitHub stars


🚀 Features


- 🎪 [Interactive docs & demos](https://vueuse.org)
- 🕶 Seamless migration: Works for both Vue 3 and 2
- ⚡ Fully tree shakeable: Only take what you want, bundle size
- 🦾 Type Strong: Written in TypeScript, with TS Docs
- 🔋 SSR Friendly
- 🌎 No bundler required: Usable via CDN
- 🔩 Flexible: Configurable event filters and targets
- 🔌 Optional Add-ons: Router, Firebase, RxJS, etc.

🦄 Usage


  1. ```ts
  2. import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

  4. export default {
  5.   setup() {
  6.     // tracks mouse position
  7.     const { x, y } = useMouse()

  9.     // is user prefers dark theme
  10.     const isDark = usePreferredDark()

  12.     // persist state in localStorage
  13.     const store = useLocalStorage(
  14.       'my-storage',
  15.       {
  16.         name: 'Apple',
  17.         color: 'red',
  18.       },
  19.     )

  21.     return { x, y, isDark, store }
  22.   },
  23. }
  24. ```

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!


  1. ``` sh
  2. npm i @vueuse/core
  3. ```

Add ons | Nuxt Module

From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1


Demos

- Vite + Vue 3
- Nuxt 3 + Vue 3
- Webpack + Vue 3
- Nuxt 2 + Vue 2
- Vue CLI + Vue 2

CDN


  1. ``` html
  2. <script src="https://unpkg.com/@vueuse/shared"></script>
  3. <script src="https://unpkg.com/@vueuse/core"></script>
  4. ```

It will be exposed to global as window.VueUse

🪴 Project Activity


Alt

🧱 Contribute


See the [Contributing Guide](https://vueuse.org/contributing)

🌸 Thanks


This project is heavily inspired by the following awesome projects.

- streamich/react-use
- u3u/vue-hooks
- logaretm/vue-use-web
- kripod/react-hooks

And thanks to all the contributors on GitHub!

👨‍🚀 Contributors


Financial Contributors on Open Collective



📄 License


MIT License © 2019-PRESENT Anthony Fu