アドオン
コアパッケージは軽量で依存関係のないことを目指しています。一方、アドオンは一般的なパッケージを統一された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コンポーザブル。
- 👂 ウェブサイトを1つではなく2つの人間の感覚を使用してコミュニケーションできるようにします。
- 🔥 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以上の型付きスキーマ (Google、Yoast) リッチ結果
- 🧙 自動化されたスキーマ:
@id
、URL/日付の解決、ルートメタなど - 🤝 VitePress、Nuxt、Vitesse、Viteの統合と自動インポート
- 🍞 好みのAPIを選択: Composablesまたはコンポーネント
- 🌳 SSR、ツリーシェイキング、スキーマ継承対応
@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を使用してコンポーザブルでファジィ検索を簡単に実装useIDBKeyval
—idb-keyval
のラッパーuseJwt
—jwt-decode
のラッパーuseNProgress
—nprogress
のリアクティブなラッパーuseQRCode
—qrcode
のラッパーuseSortable
—sortable
のラッパー
RxJS - @vueuse/rxjs
VueでRxJSリアクティブ関数を有効にします。
from
—ref
を受け入れるようにRxJSのfrom()
とfromEvent()
をラップします。toObserver
—ref
をRxJS Observerに変換するシュガー関数useExtractedObservable
— 1つ以上のコンポーザブルから抽出したRxJSObservable
を使用します。useObservable
— RxJSObservable
を使用します。useSubject
— RxJSSubject
をref
にバインドし、値の変更を双方向に伝播します。useSubscription
— アンサブスクライブしたり、メモリリークを作成したりすることなく、RxJSSubscription
を使用します。watchExtractedObservable
— 1つ以上のコンポーザブルから抽出したRxJSObservable
の値を監視します。
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ズームレベル