VueUse

外観

関数 ​

コア
アドオン
並び替え
フィルター

状態

createGlobalState-グローバルスコープに状態を保持し、Vueインスタンス間で再利用できるようにする
createInjectionState-コンポーネントに注入できるグローバルな状態を作成する
createSharedComposable-複数のVueインスタンスで使用できるコンポーザブル関数を作成する
injectLocal-同じコンポーネントで値を指定するためにprovideLocalを呼び出す機能でinjectを拡張する
provideLocal-同じコンポーネントで値を取得するためにinjectLocalを呼び出す機能でprovideを拡張する
useAsyncState-リアクティブな非同期状態
useDebouncedRefHistory-デバウンスフィルター付きのuseRefHistoryの省略形
useLastChanged-最後の変更のタイムスタンプを記録する
useLocalStorage-リアクティブなLocalStorage
useManualRefHistory-使用側がcommit()を呼び出すときに、refの変更履歴を手動で追跡する
useRefHistory-refの変更履歴を追跡する
useSessionStorage-リアクティブなSessionStorage
useStorage-LocalStorageまたはSessionStorageにアクセスして変更するために使用できるリアクティブなrefを作成する
useStorageAsync-非同期サポート付きのリアクティブストレージ
useThrottledRefHistory-スロットルフィルター付きのuseRefHistoryの省略形

要素

useActiveElement-リアクティブなdocument.activeElement
useDocumentVisibility-document.visibilityStateをリアクティブに追跡する
useDraggable-要素をドラッグ可能にする
useDropZone-ファイルをドロップできるゾーンを作成する
useElementBounding-HTML要素のリアクティブなバウンディングボックス
useElementSize-HTML要素のリアクティブなサイズ
useElementVisibility-ビューポート内の要素の可視性を追跡する
useIntersectionObserver-ターゲット要素の可視性を検出する
useMouseInElement-要素に関連するマウスのリアクティブな位置
useMutationObserver-DOMツリーに加えられた変更を監視する
useParentElement-指定された要素の親要素を取得する
useResizeObserver-要素のコンテンツまたはボーダーボックスの寸法に対する変更を報告する
useWindowFocus-window.onfocusイベントとwindow.onblurイベントを使用してウィンドウのフォーカスをリアクティブに追跡する
useWindowScroll-リアクティブなウィンドウのスクロール
useWindowSize-リアクティブなウィンドウサイズ

ブラウザ

useBluetooth-リアクティブなWeb Bluetooth API
useBreakpoints-リアクティブなビューポートのブレークポイント
useBrowserLocation-リアクティブなブラウザの位置情報
useClipboard-リアクティブなClipboard API
useClipboardItems-リアクティブなClipboard API
useColorMode-自動データ永続化機能付きのリアクティブなカラーモード（ダーク / ライト / カスタム）
useCssVar-CSS変数を操作
useDark-自動データ永続化機能付きのリアクティブなダークモード
useEventListener-EventListenerを簡単に使用
useEyeDropper-リアクティブなEyeDropper API
useFavicon-リアクティブなファビコン
useFileDialog-ファイルダイアログを簡単に開く
useFileSystemAccess-FileSystemAccessAPIを使用してローカルファイルの作成、読み取り、書き込みを行う
useFullscreen-リアクティブなFullscreen API
useGamepad-Gamepad APIのリアクティブなバインディングを提供
useImage-ブラウザで画像をリアクティブにロード
useMediaControls-audioおよびvideo要素両方のリアクティブなメディアコントロール
useMemory-リアクティブなメモリ情報
useObjectUrl-オブジェクトを表すリアクティブなURL
usePerformanceObserver-パフォーマンスメトリクスを監視
usePermission-リアクティブなPermissions API
usePreferredColorScheme-リアクティブなprefers-color-schemeメディアクエリ
usePreferredContrast-リアクティブなprefers-contrastメディアクエリ
usePreferredDark-リアクティブなダークテーマの優先設定
usePreferredReducedMotion-リアクティブなprefers-reduced-motionメディアクエリ
useScreenSafeArea-リアクティブなenv(safe-area-inset-*)
useScriptTag-スクリプトタグを作成
useShare-リアクティブなWeb Share API
useStyleTag-リアクティブなstyle要素をheadに挿入
useTextareaAutosize-textareaの高さをコンテンツに応じて自動的に更新
useTextDirection-要素のテキストのリアクティブなdir
useTitle-リアクティブなドキュメントタイトル
useUrlSearchParams-リアクティブなURLSearchParams
useVibrate-リアクティブなVibration API
useWakeLock-リアクティブなScreen Wake Lock API
useWebNotification-リアクティブなNotification
useWebWorker-シンプルなWeb Workersの登録と通信
useWebWorkerFn-UIをブロックせずに負荷の高い関数を実行

センサー

onClickOutside-要素の外側のクリックをリッスン
onKeyStroke-キーボードのキーストロークをリッスン
onLongPress-要素の長押しをリッスン
onStartTyping-ユーザーが編集不可の要素で入力を開始したときに発火
useBattery-リアクティブなBattery Status API
useDeviceMotion-リアクティブなDeviceMotionEvent
useDevicePixelRatio-window.devicePixelRatioをリアクティブに追跡
useDevicesList-リアクティブなenumerateDevicesによる利用可能な入出力デバイスのリスト
useDisplayMedia-リアクティブなmediaDevices.getDisplayMediaストリーミング
useElementByPoint-ポイントによるリアクティブな要素
useElementHover-要素のホバー状態のリアクティブな追跡
useFocus-DOM要素のフォーカス状態を追跡または設定するためのリアクティブなユーティリティ
useFocusWithin-要素またはその子孫のいずれかにフォーカスがあるかどうかを追跡するためのリアクティブなユーティリティ
useFps-リアクティブなFPS（フレーム/秒）
useGeolocation-リアクティブなGeolocation API
useIdle-ユーザーが非アクティブになっているかどうかを追跡
useInfiniteScroll-要素の無限スクロール
useMagicKeys-押されたキーの状態のリアクティブな追跡
useMouse-リアクティブなマウス位置
useMousePressed-リアクティブなマウス押下状態
useOnline-リアクティブなオンライン状態
usePageLeave-マウスがページを離れたかどうかを示すリアクティブな状態
useParallax-簡単に視差効果を作成
usePointer-リアクティブなポインタの状態
usePointerSwipe-PointerEventsに基づいたリアクティブなスワイプ検出
useScroll-リアクティブなスクロール位置と状態
useScrollLock-要素のスクロールをロック
useSpeechSynthesis-リアクティブなSpeechSynthesis
useSwipe-TouchEventsに基づいたリアクティブなスワイプ検出
useTextSelection-Window.getSelectionに基づくユーザーのテキスト選択をリアクティブに追跡
useUserMedia-リアクティブなmediaDevices.getUserMediaストリーミング

ネットワーク

useEventSource-EventSourceまたはServer-Sent-Eventsインスタンスは、HTTPサーバーへの永続的な接続を開きます。
useFetch-リアクティブなFetch APIはリクエストを中止する機能を提供します
useWebSocket-リアクティブなWebSocketクライアント

アニメーション

useAnimate-リアクティブなWeb Animations API
useInterval-一定間隔でリアクティブなカウンターを増加
useIntervalFn-コントロール付きのsetIntervalのラッパー
useNow-リアクティブな現在の日付インスタンス
useRafFn-毎回のrequestAnimationFrameで関数を呼び出し
useTimeout-指定時間後に値を更新し、コントロールも可能
useTimeoutFn-コントロール付きのsetTimeoutのラッパー
useTimestamp-リアクティブな現在のタイムスタンプ
useTransition-値の間のトランジション

コンポーネント

computedInject-computedとinjectを組み合わせる
createReusableTemplate-コンポーネントスコープ内でテンプレートを定義・再利用
createTemplatePromise-Promiseとしてのテンプレート
templateRef-テンプレート要素へのrefのバインドのショートハンド
tryOnBeforeMount-安全なonBeforeMount
tryOnBeforeUnmount-安全なonBeforeUnmount
tryOnMounted-安全なonMounted
tryOnScopeDispose-安全なonScopeDispose
tryOnUnmounted-安全なonUnmounted
unrefElement-Vueのrefまたはコンポーネントインスタンスから基になるDOM要素を取得
useCurrentElement-現在のコンポーネントのDOM要素をrefとして取得
useMounted-ref内のマウント状態
useTemplateRefsList-v-for内のテンプレート要素とコンポーネントへのrefバインドのショートハンド
useVirtualList-仮想リストを簡単に作成
useVModel-v-modelバインディングのショートハンド
useVModels-props v-modelバインディングのショートハンド

監視

until-変更に対する約束された一度限りのwatch
watchArray-追加と削除を含む配列の監視
watchAtMost-トリガーされた回数を含むwatch
watchDebounced-デバウンスされたwatch
watchDeep-{deep: true}で値を監視するショートハンド
watchIgnorable-無視可能なwatch
watchImmediate-{immediate: true}で値を監視するショートハンド
watchOnce-一度だけトリガーするwatch
watchPausable-一時停止可能なwatch
watchThrottled-スロットルされたwatch
watchTriggerable-手動でトリガーできるwatch
watchWithFilter-追加のEventFilterコントロールを備えたwatch
whenever-真になる値を監視するためのショートハンド

リアクティビティ

computedAsync-非同期関数のcomputed
computedEager-遅延評価なしの熱心なcomputed
computedWithControl-computedの依存関係を明示的に定義
extendRef-Refに追加の属性を追加
reactify-プレーン関数をリアクティブ関数に変換
reactifyObject-オブジェクトにreactifyを適用
reactiveComputed-computedされたリアクティブオブジェクト
reactiveOmit-リアクティブオブジェクトからフィールドをリアクティブに除外
reactivePick-リアクティブオブジェクトからフィールドをリアクティブに選択
refAutoReset-一定時間後にデフォルト値にリセットされるref
refDebounced-ref値の実行をデバウンス
refDefault-refにデフォルト値を適用
refThrottled-ref値の変更をスロットル
refWithControl-refとそのリアクティビティに対する詳細なコントロール
syncRef-双方向ref同期
syncRefs-ターゲットrefをソースrefと同期させる
toReactive-refをリアクティブに変換
toRef-値/ref/getterをrefまたはcomputedに正規化
toRefs-オブジェクトのrefも受け入れる拡張されたtoRefs
toValue-値/ref/getterの値を取得

配列

useArrayDifference-2つの配列の配列差分をリアクティブに取得
useArrayEvery-リアクティブなArray.every
useArrayFilter-リアクティブなArray.filter
useArrayFind-リアクティブなArray.find
useArrayFindIndex-リアクティブなArray.findIndex
useArrayFindLast-リアクティブなArray.findLast
useArrayIncludes-リアクティブなArray.includes
useArrayJoin-リアクティブなArray.join
useArrayMap-リアクティブなArray.map
useArrayReduce-リアクティブなArray.reduce
useArraySome-リアクティブなArray.some
useArrayUnique-リアクティブなユニーク配列
useSorted-リアクティブな配列ソート

時間

useDateFormat-渡されたトークン文字列に従ってフォーマットされた日付を取得
useTimeAgo-リアクティブな経過時間

ユーティリティ

createEventHook-イベントフックを作成するためのユーティリティ
createUnrefFn-refと生の値を受け入れるプレーン関数を作成
get-ref.valueにアクセスするためのショートハンド
isDefined-Refの非nullishチェックタイプガード
makeDestructurable-オブジェクトと配列の両方に対して同時に同型な分割代入を作成
set-ref.value = xのショートハンド
useAsyncQueue-各非同期タスクを順番に実行し、現在のタスクの結果を次のタスクに渡す
useBase64-リアクティブなbase64変換
useCached-カスタムコンパレータを使用したrefのキャッシュ
useCloned-refのリアクティブなクローン
useConfirmDialog-モーダルと確認ダイアログチェーンをサポートするためのイベントフックを作成
useCounter-ユーティリティ関数付きの基本的なカウンター
useCycleList-アイテムリストを循環
useDebounceFn-関数の実行をデバウンス
useEventBus-基本的なイベントバス
useMemoize-引数に応じて関数の結果をキャッシュし、リアクティブに保つ
useOffsetPagination-リアクティブなオフセットページネーション
usePrevious-refの前の値を保持
useStepper-マルチステップウィザードインターフェイスを構築するためのヘルパーを提供
useSupported-SSR互換性isSupported
useThrottleFn-関数の実行をスロットル
useTimeoutPoll-タイムアウトを使用して何かをポーリング
useToggle-ユーティリティ関数を備えたブール値スイッチャー
useToNumber-文字列refをリアクティブに数値に変換
useToString-refをリアクティブに文字列に変換

@Electron

useIpcRenderer-ipcRendererとそのすべてのAPIを提供
useIpcRendererInvoke-リアクティブなipcRenderer.invoke APIの結果
useIpcRendererOn-ipcRenderer.onを簡単に使用し、アンマウント時にipcRenderer.removeListenerを自動的に実行
useZoomFactor-リアクティブなWebFrameズームファクター
useZoomLevel-リアクティブなWebFrameズームレベル

@Firebase

useAuth-リアクティブなFirebase Authバインディング
useFirestore-リアクティブなFirestoreバインディング
useRTDB-リアクティブなFirebase Realtime Databaseバインディング

@Head

createHead-headマネージャーインスタンスを作成します。
useHead-headメタタグをリアクティブに更新します。

@Integrations

useAxios-axiosのラッパー
useChangeCase-change-caseのリアクティブなラッパー
useDrauu-drauu のリアクティブインスタンス
useFocusTrap-focus-trap のリアクティブラッパー
useFuse-Fuse.js を使用したコンポーザブルで、ファジー検索を簡単に実装
useIDBKeyval-idb-keyval のラッパー
useJwt-jwt-decode のラッパー
useNProgress-nprogress のリアクティブラッパー
useQRCode-qrcode のラッパー
useSortable-sortable のラッパー

@Math

createGenericProjection-createProjection のジェネリックバージョン
createProjection-あるドメインから別のドメインへのリアクティブな数値プロジェクション
logicAnd-refs に対する AND 条件
logicNot-ref に対する NOT 条件
logicOr-refs に対する OR 条件
useAbs-リアクティブな Math.abs
useAverage-配列の平均値をリアクティブに取得
useCeil-リアクティブな Math.ceil
useClamp-ある値を、他の2つの値の間でリアクティブにクランプ
useFloor-リアクティブな Math.floor
useMath-リアクティブな Math メソッド
useMax-リアクティブな Math.max
useMin-リアクティブな Math.min
usePrecision-数値の精度をリアクティブに設定
useProjection-あるドメインから別のドメインへのリアクティブな数値プロジェクション
useRound-リアクティブな Math.round
useSum-配列の合計をリアクティブに取得
useTrunc-リアクティブな Math.trunc

@Motion

useElementStyle-リアクティブオブジェクトをターゲット要素の CSS スタイリングに同期
useElementTransform-リアクティブオブジェクトをターゲット要素の CSS トランスフォームに同期。
useMotion-コンポーネントをモーションで表現。
useMotionProperties-ターゲット要素のモーションプロパティにアクセス。
useMotionVariants-バリアントの状態と選択を処理。
useSpring-スプリングアニメーション。

@Router

useRouteHash-リアクティブな route.hash のショートハンド
useRouteParams-リアクティブな route.params のショートハンド
useRouteQuery-リアクティブな route.query のショートハンド

@RxJS

from-from() と fromEvent() のRxJSラッパーで、refを受け付けられるようにします
toObserver-refをRxJSのObserverに変換する糖衣関数
useExtractedObservable-1つ以上のコンポーザブルから抽出されたRxJSのObservableを使用
useObservable-RxJSのObservableを使用
useSubject-RxJSのSubjectをrefにバインドし、値の変更を双方向に伝播
useSubscription-RxJSのSubscriptionを、サブスクライブ解除やメモリリークの心配なしに使用
watchExtractedObservable-1つ以上のコンポーザブルから抽出されたRxJSのObservableの値を監視

@SchemaOrg

createSchemaOrg-schema.orgマネージャーインスタンスを作成します。
useSchemaOrg-schema.orgをリアクティブに更新。

@Sound

useSound-効果音をリアクティブに再生。

MITライセンスの下でリリースされています。

Copyright © 2020-PRESENT Anthony Fu および VueUse contributors