附加组件

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

Head - @vueuse/head

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

Motion - @vueuse/motion

Vue Composables 让你的组件动起来。

• 🏎 基于 Popmotion 的 流畅动画
• 🎮 声明式 API
• 🚀 即插即用，超过 10 个预设
• 🚚 支持 Nuxt，使用 nuxt-use-motion
• ✨ 使用 TypeScript 编写
• 🏋️‍♀️ 轻量级，小于 20kb 的捆绑包大小

由 @Tahul 创建和维护

Gesture - @vueuse/gesture

Vue Composables 让你的应用更具互动性

• 🚀 即插即用
• 🕹 支持 鼠标 和 触摸
• 🎮 支持 指令 (v-drag, v-pinch, v-move...)
• ✨ 使用 TypeScript 编写
• 🤹 完美兼容 vueuse/motion 或 任何其他 动画解决方案

由 @Tahul 创建和维护

Sound - @vueuse/sound

用于播放音效的 Vue composables。

• 👂 让你的网站可以使用 2 种人类感官（而非 1 种）进行交流
• 🔥 使用 Vue Composition API 构建
• 🚚 支持 Nuxt 3，使用 @vueuse/sound/nuxt
• ⚡️ 小于 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：Composables 或 Components
• 🌳 支持 SSR、tree-shaking 和 Schema 继承

由 @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 composable 轻松实现模糊搜索
• useIDBKeyval — idb-keyval 的封装
• useJwt — jwt-decode 的封装
• useNProgress — nprogress 的响应式封装
• useQRCode — qrcode 的封装
• useSortable — sortable 的封装

RxJS - @vueuse/rxjs

在 Vue 中启用 RxJS 响应式函数

• from — from() 和 fromEvent() 的封装，使其可以接受 ref
• toObserver — 将 ref 转换为 RxJS Observer 的便捷函数
• useExtractedObservable — 使用从一个或多个 composable 中提取的 RxJS Observable
• useObservable — 使用 RxJS Observable
• useSubject — 将 RxJS Subject 绑定到 ref，并双向传播值更改
• useSubscription — 使用 RxJS Subscription，无需担心取消订阅或创建内存泄漏
• watchExtractedObservable — 监听从一个或多个 composable 中提取的 RxJS Observable 的值

Firebase - @vueuse/firebase

为 Firebase 启用实时绑定

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

Electron - @vueuse/electron

VueUse 的 Electron 渲染器进程模块

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