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.

Head - @vueuse/head #

Document head manager for Vue 3. SSR ready. Created and maintained by @egoist

Motion - @vueuse/motion #

Vue Composables putting your components in motion.

• 🏎 Smooth animations based on Popmotion
• 🎮 Declarative API
• 🚀 Plug & play with 10+ presets
• ✅ Supports Vue 2 & 3 using vue-demi
• 🚚 Supports Nuxt using nuxt-use-motion
• ✨ Written in TypeScript
• 🏋️‍♀️ Lightweight with <20kb bundle size

Created and maintained by @Tahul

Gesture - @vueuse/gesture #

Vue Composables making your app interactive

• 🚀 Plug & play
• 🕹 Mouse & Touch support
• 🎮 Directives support (v-drag, v-pinch, v-move...)
• ✨ Written in TypeScript
• ✅ Supports Vue 2 & 3 using vue-demi
• 🤹 Plays well with vueuse/motion or any other animation solution

Created and maintained by @Tahul

Sound - @vueuse/sound #

Vue composables for playing sound effects.

• 👂 Lets your website communicate using 2 human senses instead of 1
• 🔥 Built with Vue Composition API
• ✅ Supports Vue 2 & 3 using vue-demi
• 🚚 Supports Nuxt using nuxt-use-sound
• ⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async.
• ✨ Built with TypeScript
• 🗣 Uses a powerful, battle-tested audio utility: Howler.js

Created and maintained by @Tahul

Nuxt - @vueuse/nuxt #

VueUse Nuxt Module

Router - @vueuse/router #

Utilities for vue-router

• useRouteHash — shorthand for reactive route.hash
• useRouteQuery — shorthand for reactive route.query

Integrations - @vueuse/integrations #

Integration wrappers for utility libraries

• useAxios — wrapper for axios
• useCookies — wrapper for universal-cookie
• useDrauu — reactive instance for drauu
• useFocusTrap — reactive wrapper for focus-trap
• useFuse — easily implement fuzzy search using a composable on top of the zero-dependency library Fuse.js
• useJwt — wrapper for jwt-decode
• useNProgress — reactive wrapper for nprogress
• useQRCode — wrapper for qrcode

RxJS - @vueuse/rxjs #

Enables RxJS reactive functions in Vue

• from — / fromEvent
• toObserver — sugar function to convert a ref in an observer
• useObservable — use an Observable
• useSubject — bind Subject to ref and propagate value changes both ways
• useSubscription — uses subscriptions without worry about unsubscribing to it or memory leaks

Firebase - @vueuse/firebase #

Enables realtime bindings for Firebase

• useAuth — reactive Firebase Auth binding
• useFirestore — reactive Firestore binding
• useRTDB — reactive Firebase Realtime Database binding

Electron - @vueuse/electron #

Electron renderer process modules for VueUse

• useIpcRenderer — provides ipcRenderer and it's all APIs
• useIpcRendererInvoke — reactive ipcRenderer.invoke API result
• useIpcRendererOn — use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted
• useZoomFactor — reactive WebFrame zoom factor
• useZoomLevel — reactive WebFrame zoom level