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 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
• 🤹 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 Nuxt 3 using @vueuse/sound/nuxt
• ⚡️ <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 — 对响应式的 route.hash 的简写。
• useRouteParams — 对响应式的 route.params 的简写。
• useRouteQuery — 对响应式的 route.query 的简写。

Integrations - @vueuse/integrations

Integration wrappers for utility libraries

• useAsyncValidator — 对 async-validator 的封装。
• useAxios — 对 axios 的封装。
• useChangeCase — 对 change-case 的响应式封装。
• useCookies — 对 universal-cookie 的包装。
• useDrauu — 这是 drauu 的响应式实例。
• useFocusTrap — 这是 focus-trap 的响应式封装。
• useFuse — 使用 Fuse.js 组合式轻松实现模糊搜索。
• useIDBKeyval — idb-keyval 的封装。
• useJwt — jwt-decode 的封装。
• useNProgress — nprogress 的响应式封装。
• useQRCode — qrcode 的封装。
• useSortable — wrapper for sortable

RxJS - @vueuse/rxjs

Enables RxJS reactive functions in Vue

• from — rxJS 的 from() 和 fromEvent() 的包装器，使它们能够接受 ref。
• toObserver — 将 ref 转换为 RxJS Observer 的语法糖函数。
• useExtractedObservable — 从一个或多个组合式中提取并使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
• useObservable — 使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
• useSubject — 将 RxJS Subject 绑定到一个 ref 上，并在两者之间传播值变化。
• useSubscription — 使用 RxJS Subscription，无需担心取消订阅或创建内存泄漏。
• watchExtractedObservable — 监视从一个或多个组合式中提取的 RxJS Observable 的值。

Firebase - @vueuse/firebase

Enables realtime bindings for Firebase

• useAuth — 响应式的 Firebase Auth 绑定。它提供了一个响应式的 user 和 isAuthenticated，因此您可以轻松地对用户的身份验证状态变化做出反应。
• useFirestore — 响应式的 Firestore 绑定。使得始终将本地数据与远程数据库同步变得简单直观。
• useRTDB — 响应式的 Firebase 实时数据库 绑定。使得始终将本地数据与远程数据库同步变得简单直观。

Electron - @vueuse/electron

Electron renderer process modules for VueUse

• useIpcRenderer — 提供 ipcRenderer 及其所有 API。
• useIpcRendererInvoke — 响应式的 ipcRenderer.invoke API 结果。使异步操作看起来像同步的。
• useIpcRendererOn — 轻松使用 ipcRenderer.on，并在组件卸载时自动移除监听器 ipcRenderer.removeListener。
• useZoomFactor — 响应式的 WebFrame 缩放因子。
• useZoomLevel — 响应式的 WebFrame 缩放级别。