附加元件

核心套件的目標是輕量且沒有依賴性。而附加元件則是將流行的套件包裝成一致的 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 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 — 使用 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 renderer 程序模組

• useIpcRenderer — 提供 ipcRenderer 及其所有 API
• useIpcRendererInvoke — 響應式的 ipcRenderer.invoke API 結果
• useIpcRendererOn — 輕鬆使用 ipcRenderer.on，並在卸載時自動執行 ipcRenderer.removeListener
• useZoomFactor — 響應式的 WebFrame 縮放比例
• useZoomLevel — 響應式的 WebFrame 縮放等級