附加组件

核心包旨在轻量且无依赖，而附加组件则将流行的包封装成一致的 API 风格。

Head - @vueuse/head

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

Motion - @vueuse/motion

Vue 组合式函数将你的组件进行动效化。

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

由 @Tahul 创建和维护

Gesture - @vueuse/gesture

Vue 组合式工具库使你的应用程序具有交互性

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

由 @Tahul 创建和维护

Sound - @vueuse/sound

用于播放声音效果的 Vue 组合式工具库。

• 👂 让你的网站使用 2 种人类感官进行交流
• 🔥 使用 Vue 组合式 API 构建
• ✅ 使用 vue-demi 支持 Vue 2 & Vue 3
• 🚚 使用 @vueuse/sound/nuxt 支持 Nuxt 2 & Nuxt 3
• ⚡️ 在你的捆绑包中仅有 <1kb (gzip 压缩)！~10kb 异步加载。
• ✨ 使用 TypeScript 编写
• 🗣 使用经过充分测试的强大音频实用程序：Howler.js

由 @Tahul 创建和维护

SchemaOrg - @vueuse/schema-org

用于 Vue 的 Schema.org。支持类型化和自动化的 Google 丰富结果

• 😊 无需 Schema 知识，只需进行最少的配置即可在几分钟内上手
• ✨ 20+ 类型化模式，实现最佳实践 (Google，Yoast) 丰富结果
• 🧙 自动化 Schema：@id，URL / 日期解析，路由元数据等
• 🤝 集成为 VitePress，Nuxt，Vitesse 和 Vite 提供自动导入
• 🍞 选择你喜欢的 API：组合式或组件
• 🌳 支持 SSR、tree-shaking 和模式继承

由 @harlan-zw 创建和维护

Router - @vueuse/router

vue-router 的实用工具

• useRouteHash — 对响应式的 route.hash 的简写。
• useRouteParams — 对响应式的 route.params 的简写。
• useRouteQuery — 对响应式的 route.query 的简写。

Integrations - @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 — sugar function to convert a ref into an RxJS Observer
• useExtractedObservable — 从一个或多个组合式中提取并使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
• useObservable — 使用 RxJS Observable，返回一个 ref，并在组件卸载时自动取消订阅。
• useSubject — 将 RxJS Subject 绑定到一个 ref 上，并在两者之间传播值变化。
• useSubscription — 使用 RxJS Subscription，无需担心取消订阅或创建内存泄漏。
• watchExtractedObservable — 监视从一个或多个组合式中提取的 RxJS Observable 的值。

Firebase - @vueuse/firebase

启用 Firebase 的实时绑定功能

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

Electron - @vueuse/electron

VueUse 的 Electron 渲染器进程模块

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