附加元件

核心套件旨在輕量且無依賴性。而附加元件則是將流行的套件封裝成一致的 API 風格。

Head - @vueuse/head

Vue 3 的文件 head 管理器。支援 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 豐富成果

• 😊 無需 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 — 使用 composable 和 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 — 將 ref 轉換為 RxJS Observer 的語法糖函式
• useExtractedObservable — 使用從一個或多個 composables 提取的 RxJS Observable
• useObservable — 使用 RxJS Observable
• useSubject — 將 RxJS Subject 綁定到 ref 並雙向傳播值更改
• useSubscription — 使用 RxJS Subscription，而無需擔心取消訂閱或產生記憶體洩漏
• watchExtractedObservable — 監看從一個或多個 composables 提取的 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 縮放級別