插件

¥Add-ons

核心包的目标是轻量级和无依赖。而插件则将流行的包封装成一致的 API 风格。

¥The core package aims to be lightweight and dependence 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 Composables 让你的组件运转起来。

¥Vue Composables putting your components in motion.

• 🏎 基于 Popmotion 的流畅动画

  ¥🏎 Smooth animations based on Popmotion

• 🎮 声明式 API

  ¥🎮 Declarative API

• 🚀 即插即用，具有 10 多个预设

  ¥🚀 Plug & play with 10+ presets

• ✅ 使用 vue-demi 支持 Vue 2 和 3

  ¥✅ Supports Vue 2 & 3 using vue-demi

• 🚚 使用 nuxt-use-motion 支持 Nuxt

  ¥🚚 Supports Nuxt using nuxt-use-motion

• ✨ 用 TypeScript 编写

  ¥✨ Written in TypeScript

• 🏋️‍♀️ 轻量级，打包包大小 <20kb

  ¥🏋️‍♀️ Lightweight with <20kb bundle size

由 @Tahul 创建和维护

¥Created and maintained by @Tahul

手势 - @vueuse/gesture

¥Gesture - @vueuse/gesture

Vue 可组合项使你的应用具有交互性

¥Vue Composables making your app interactive

• 🚀 即插即用

  ¥🚀 Plug & play

• 🕹 鼠标和触摸支持

  ¥🕹 Mouse & Touch support

• 🎮 指令支持（v-drag、v-pinch、v-move...）

  ¥🎮 Directives support (v-drag, v-pinch, v-move...)

• ✨ 用 TypeScript 编写

  ¥✨ Written in TypeScript

• ✅ 使用 vue-demi 支持 Vue 2 和 3

  ¥✅ Supports Vue 2 & 3 using vue-demi

• 🤹 与 vueuse/motion 或任何其他动画解决方案配合良好

  ¥🤹 Plays well with vueuse/motion or any other animation solution

由 @Tahul 创建和维护

¥Created and maintained by @Tahul

声音 - @vueuse/sound

¥Sound - @vueuse/sound

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

¥Vue composables for playing sound effects.

• 👂 让你的网站使用 2 种人类感官（而不是 1 种）进行交流

  ¥👂 Lets your website communicate using 2 human senses instead of 1

• 🔥 使用 Vue Composition API 构建

  ¥🔥 Built with Vue Composition API

• ✅ 使用 vue-demi 支持 Vue 2 和 3

  ¥✅ Supports Vue 2 & 3 using vue-demi

• 🚚 使用 @vueuse/sound/nuxt 支持 Nuxt 2 和 3

  ¥🚚 Supports Nuxt 2 & 3 using @vueuse/sound/nuxt

• ⚡ 包中 <1kb 字节 (gzip)！~10kb 异步加载。

  ¥⚡️ <1kb bytes (gzip) in your bundle! ~10kb loaded async.

• ✨ 使用 TypeScript 构建

  ¥✨ Built with TypeScript

• 🗣 使用功能强大、经过实战考验的音频工具：Howler.js

  ¥🗣 Uses a powerful, battle-tested audio utility: Howler.js

由 @Tahul 创建和维护

¥Created and maintained by @Tahul

SchemaOrg - @vueuse/schema-org

Vue 的 Schema.org。支持键入和自动的 Google Rich Results

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

• 😊 无需架构知识，只需最少的配置即可在几分钟内启动并运行

  ¥😊 No Schema knowledge required, get up and running in minutes with minimal configuration

• ✨ 20+ 最佳实践类型模式 (谷歌, 酵母) 丰富的结果

  ¥✨ 20+ Typed Schemas for best practice (Google, Yoast) Rich Results

• 🧙 自动化架构：@id、URL/日期解析、路由元等

  ¥🧙 Automated Schema: @id, URL / date resolving, route meta and more

• 🤝 通过自动导入集成 VitePress、Nuxt、Vitesse 和 Vite

  ¥🤝 Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports

• 🍞 选择你首选的 API：可组合项或组件

  ¥🍞 Choose your preferred API: Composables or Components

• 🌳 SSR、tree-shaking 和 Schema 继承就绪

  ¥🌳 SSR, tree-shaking and Schema inheritance ready

由 @harlan-zw 创建和维护

¥Created and maintained by @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 — ¥useIDBKeyval
• useJwt — jwt-decode 的封装。
• useNProgress — ¥useNProgress
• useQRCode — ¥useQRCode
• useSortable — sortable 的封装。

RxJS - @vueuse/rxjs

在 Vue 中启用 RxJS 反应函数

• from — ¥from / fromEvent
• toObserver — sugar 函数将 ref 转换为 RxJS 观察者。
• useExtractedObservable — 使用从一个或多个可组合项中提取的 RxJS Observable，返回 ref，并在卸载组件时自动取消订阅。
• useObservable — 使用 RxJS Observable，返回 ref，并在组件卸载时自动取消订阅。
• useSubject — 将 RxJS Subject 绑定到 ref 并以双向方式传播值更改。
• useSubscription — 使用 RxJS Subscription 无需担心取消订阅或造成内存泄漏。
• watchExtractedObservable — 观察从一个或多个可组合项中提取的 RxJS Observable 的值。

Firebase - @vueuse/firebase

为 Firebase 启用实时绑定

• useAuth — 反应式 Firebase 身份验证 结合。它提供了反应式 user 和 isAuthenticated，因此你可以轻松地对用户身份验证状态的变化做出反应。
• useFirestore — 反应式 火库 结合。使本地数据始终与远程数据库保持同步变得简单。
• useRTDB — ¥useRTDB

Electron - @vueuse/electron

VueUse 的 Electron 渲染器处理模块

• useIpcRenderer — 提供 ipcRenderer 及其所有 API。
• useIpcRendererInvoke — 反应式 ipcRenderer.invoke API 结果。使异步操作看起来同步。
• useIpcRendererOn — 轻松使用 ipcRenderer.on，卸载后自动使用 ipcRenderer.removeListener。
• useZoomFactor — 反应式 WebFrame 缩放系数。
• useZoomLevel — 反应式 WebFrame 缩放级别。