附加组件

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

Head - @vueuse/head

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

Motion - @vueuse/motion

让你的组件动起来的 Vue Composables。

• 🏎 基于 Popmotion 的流畅动画
• 🎮 声明式 API
• 🚀 即插即用，内置 10+ 预设
• 🚚 支持使用 nuxt-use-motion 的 Nuxt
• ✨ 使用 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 构建
• 🚚 使用 @vueuse/sound/nuxt 支持 Nuxt 3
• ⚡️ 你的包中 小于 1kb 字节（gzip）！约 10kb 异步加载。
• ✨ 使用 TypeScript 构建
• 🗣 使用强大、经过实战检验的音频工具：Howler.js

由 @Tahul 创建并维护。

SchemaOrg - @vueuse/schema-org

用于 Vue 的 Schema.org。支持类型化和自动化的 Google Rich Results

• 😊 无需 Schema 知识，通过最少的配置即可在几分钟内启动运行
• ✨ 20 多个类型化的 Schema，实现最佳实践 (Google, Yoast) Rich Results
• 🧙 自动化 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 — 封装 RxJS 的 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 缩放级别