add-ons.md

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

SchemaOrg - @vueuse/schema-org

Schema.org for Vue. Supports typed and automated Google Rich Results

• 😊 No Schema knowledge required, get up and running in minutes with minimal configuration
• ✨ 20+ Typed Schemas for best practice (Google, Yoast) Rich Results
• 🧙 Automated Schema: @id, URL / date resolving, route meta and more
• 🤝 Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports
• 🍞 Choose your preferred API: Composables or Components
• 🌳 SSR, tree-shaking and Schema inheritance ready

Created and maintained by @harlan-zw

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

• useAsyncValidator — wrapper for async-validator
• useAxios — wrapper for axios
• useChangeCase — wrapper for change-case
• 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