Collection of essential Vue Composition Utilities

🚀 Features

• 🎪 Interactive docs & demos
• 🕶 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

1import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
2
3export default {
4  setup() {
5    // tracks mouse position
6    const { x, y } = useMouse()
7
8    // if user prefers dark theme
9    const isDark = usePreferredDark()
10
11    // persist state in localStorage
12    const store = useLocalStorage(
13      'my-storage',
14      {
15        name: 'Apple',
16        color: 'red',
17      },
18    )
19
20    return { x, y, isDark, store }
21  },
22}

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!

1npm i @vueuse/core

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<script src="https://unpkg.com/@vueuse/shared"></script>
2<script src="https://unpkg.com/@vueuse/core"></script>

It will be exposed to global as window.VueUse

🪴 Project Activity

🧱 Contribute

See the Contributing Guide

🌸 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