插件

🌐 Add-ons

核心包的目标是轻量且无依赖。而附加组件则是将流行的包封装成统一的 API 风格。

🌐 The core package aims to be lightweight and dependency-free. While the add-ons are wrapping popular packages into the consistent API style.

头部 - @vueuse/head

🌐 Head - @vueuse/head

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

🌐 Document head manager for Vue 3. SSR ready. Created and maintained by @egoist

动作 - @vueuse/motion

🌐 Motion - @vueuse/motion

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

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

由 @Tahul 创建和维护

手势 - @vueuse/gesture

🌐 Gesture - @vueuse/gesture

Vue 组合式函数 让你的应用 互动化

• 🚀 即插即用
• 🕹 鼠标 和 触摸 支持
• 🎮 指令 支持（v-drag、v-pinch、v-move…）
• ✨ 使用 TypeScript 编写
• 🤹 能很好地与 vueuse/motion 或 任何其他 动画解决方案配合使用

由 @Tahul 创建和维护

声音 - @vueuse/sound

🌐 Sound - @vueuse/sound

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

🌐 Vue composables for playing sound effects.

• 👂 让你的网站可以使用 2 种 人类感官 来进行 交流，而不仅仅是一种
• 🔥 使用 Vue 组合式 API 构建
• 🚚 支持使用 @vueuse/sound/nuxt 的 Nuxt 3
• ⚡️ <1kb 字节（gzip）在你的 bundle 中！~10kb 异步加载。
• ✨ 使用 TypeScript 构建
• 🗣 使用强大且经过实战检验的音频工具：Howler.js

由 @Tahul 创建和维护

SchemaOrg - @vueuse/schema-org

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

🌐 Schema.org for Vue. Supports typed and automated Google Rich Results

• 😊 无需模式知识，几分钟内即可启动运行，配置极简
• ✨ 20+ 类型化模式最佳实践（Google、Yoast）丰富结果
• 🧙 自动化模式：@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 的简写。当 ref 变化时更新 URL 查询参数。

集成 - @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 — 🌐 from / fromEvent
• toObserver — 糖函数将 ref 转换为 RxJS Observer。
• useExtractedObservable — 使用从一个或多个 composable 中提取的 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 Realtime Database 绑定。使得 始终保持本地数据与远程数据库同步 变得简单。

Electron - @vueuse/electron

VueUse 的 Electron 渲染器处理模块

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