附加组件

核心包旨在轻量级且无依赖性。 而附加组件则是将流行的包包装成一致的 API 样式。

头部 - @vueuse/head

Vue 3 的文档头部管理器。 支持 SSR。 由 @egoist 创建并维护。

运动 - @vueuse/motion

Vue 可组合函数 让你的 组件动起来。

• 🏎 基于 Popmotion 的 流畅动画
• 🎮 声明式 API
• 🚀 即插即用，拥有 10 多个预设
• ✅ 支持使用 vue-demi 的 Vue 2 & 3
• 🚚 支持使用 nuxt-use-motion 的 Nuxt
• ✨ 使用 TypeScript 编写
• 🏋️‍♀️ 轻量级，<20kb 包大小

由 @Tahul 创建并维护。

手势 - @vueuse/gesture

Vue 可组合函数 使你的应用更具 互动性

• 🚀 即插即用
• 🕹 鼠标 和 触摸 支持
• 🎮 指令 支持 (v-drag, v-pinch, v-move...)
• ✨ 使用 TypeScript 编写
• ✅ 支持使用 vue-demi 的 Vue 2 & 3
• 🤹 与 vueuse/motion 或 任何其他 动画解决方案配合使用

由 @Tahul 创建并维护。

声音 - @vueuse/sound

用于播放音效的 Vue 可组合函数。

• 👂 让你的网站通过 2 种 人类感官 而不是 1 种感官进行 沟通
• 🔥 使用 Vue Composition API 构建
• ✅ 支持使用 vue-demi 的 Vue 2 & 3
• 🚚 支持使用 @vueuse/sound/nuxt 的 Nuxt 2 & 3
• ⚡️ <1kb 字节 (gzip) 在你的 包 中！ ~10kb 异步加载。
• ✨ 使用 TypeScript 构建
• 🗣 使用功能强大且经过实战检验的音频工具：Howler.js

由 @Tahul 创建并维护。

SchemaOrg - @vueuse/schema-org

Vue 的 Schema.org。 支持类型化和自动化的 Google 富媒体搜索结果

• 😊 不需要任何 Schema 知识，只需几分钟即可配置使用
• ✨ 20 多个类型化的 Schema，符合最佳实践 (Google, Yoast) 富媒体搜索结果
• 🧙 自动化 Schema：@id、URL/日期解析、路由元数据等
• 🤝 集成 VitePress、Nuxt、Vitesse 和 Vite，并自动导入
• 🍞 选择你喜欢的 API：可组合函数或组件
• 🌳 支持 SSR、tree-shaking 和 Schema 继承

由 @harlan-zw 创建并维护。

路由 - @vueuse/router

vue-router 的工具函数

• useRouteHash — route.hash 的简写，具有响应性
• useRouteParams — route.params 的简写，具有响应性
• useRouteQuery — route.query 的简写，具有响应性

集成 - @vueuse/integrations

实用程序库的集成包装器

• 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 — sortable 的包装器

RxJS - @vueuse/rxjs

在 Vue 中启用 RxJS 响应式函数

• from — RxJS 的 from() 和 fromEvent() 的包装器，允许它们接受 ref
• toObserver — 将 ref 转换为 RxJS Observer 的糖衣函数
• useExtractedObservable — 将从一个或多个可组合函数中提取的 RxJS Observable 用作提取结果
• useObservable — 使用 RxJS Observable
• useSubject — 将 RxJS Subject 绑定到 ref，并双向传播值变化
• useSubscription — 使用 RxJS Subscription，无需担心取消订阅或内存泄漏
• watchExtractedObservable — 观察从一个或多个可组合函数中提取的 RxJS Observable 的值

Firebase - @vueuse/firebase

启用 Firebase 的实时绑定

• useAuth — 响应式 Firebase Auth 绑定
• useFirestore — 响应式 Firestore 绑定
• useRTDB — 响应式 Firebase Realtime Database 绑定

Electron - @vueuse/electron

Electron 渲染进程模块，适用于 VueUse

• useIpcRenderer — 提供 ipcRenderer 及其所有 API
• useIpcRendererInvoke — 响应式 ipcRenderer.invoke API 结果
• useIpcRendererOn — 轻松使用 ipcRenderer.on，并在卸载时自动使用 ipcRenderer.removeListener
• useZoomFactor — 响应式 WebFrame 缩放系数
• useZoomLevel — 响应式 WebFrame 缩放级别