vueuse-functions

VueUse 関数

このスキルは、Vue.js／Nuxt プロジェクトで VueUse のコンポーザブルを選択し、実装するためのガイドです。要件に最適な VueUse 関数を対応付け、適切な使用パターンを適用します。また、実装を簡潔で保守しやすく、高速に保つため、独自コードよりコンポーザブルを使った解決策を優先します。

適用する場合

• Vue.js／Nuxt でのユーザーの開発作業を支援する際は、常にこのスキルを適用してください。
• 要件を実装できる VueUse 関数があるかどうか、必ず最初に確認してください。
• 可読性、保守性、パフォーマンスを向上させるため、独自コードより VueUse のコンポーザブルを優先してください。
• 要件に最も適した VueUse 関数を選び、その関数の呼び出しルールに従ってください。
• 以下の関数一覧にある Invocation フィールドを参照してください。例：
  • AUTO：該当する場合は自動的に使用します。
  • EXTERNAL：ユーザーが必要な外部依存関係をすでにインストールしている場合にのみ使用します。そうでない場合は再検討し、本当に必要な場合に限り、インストールを依頼してください。
  • EXPLICIT_ONLY：ユーザーから明示的に依頼された場合にのみ使用します。

  NOTE プロンプトまたは AGENTS.md にあるユーザーの指示は、関数のデフォルトの Invocation ルールに優先する場合があります。

関数

以下に記載する関数はすべて VueUse ライブラリの一部です。各セクションでは、機能に基づいて関数を分類しています。

重要：各関数の項目には、簡潔な Description と詳細な Reference が記載されています。関数を使用する際は、使用方法と型宣言について、必ず ./references にある対応するドキュメントを確認してください。

状態

関数	説明	呼び出し
createGlobalState	Vue インスタンス間で再利用できるよう、グローバルスコープに状態を保持します	AUTO
createInjectionState	コンポーネントに注入できるグローバル状態を作成します	AUTO
createSharedComposable	複数の Vue インスタンスでコンポーザブル関数を使用できるようにします	AUTO
injectLocal	同じコンポーネント内で値を提供する provideLocal を呼び出せるように拡張した inject です	AUTO
provideLocal	同じコンポーネント内で値を取得する injectLocal を呼び出せるように拡張した provide です	AUTO
useAsyncState	リアクティブな非同期状態です	AUTO
useDebouncedRefHistory	デバウンスフィルターを適用した useRefHistory の簡略形です	AUTO
useLastChanged	最後に変更された時刻を記録します	AUTO
useLocalStorage	リアクティブな LocalStorage です	AUTO
useManualRefHistory	ユーザーが commit() を呼び出したときに、ref の変更履歴を手動で追跡します	AUTO
useRefHistory	ref の変更履歴を追跡します	AUTO
useSessionStorage	リアクティブな SessionStorage です	AUTO
useStorage	LocalStorage または SessionStorage へのアクセスと変更に使用できる、リアクティブな ref を作成します	AUTO
useStorageAsync	非同期処理に対応したリアクティブなストレージです	AUTO
useThrottledRefHistory	スロットルフィルターを適用した useRefHistory の簡略形です	AUTO

要素

関数	説明	呼び出し
useActiveElement	リアクティブな document.activeElement	AUTO
useDocumentVisibility	document.visibilityState をリアクティブに追跡します	AUTO
useDraggable	要素をドラッグ可能にします	AUTO
useDropZone	ファイルをドロップできる領域を作成します	AUTO
useElementBounding	HTML 要素のリアクティブなバウンディングボックス	AUTO
useElementSize	HTML 要素のリアクティブなサイズ	AUTO
useElementVisibility	ビューポート内での要素の可視性を追跡します	AUTO
useIntersectionObserver	対象要素の可視性の変化を検出します	AUTO
useMouseInElement	要素に関連するリアクティブなマウス位置	AUTO
useMutationObserver	DOM ツリーへの変更を監視します	AUTO
useParentElement	指定した要素の親要素を取得します	AUTO
useResizeObserver	要素のコンテンツまたはボーダーボックスの寸法の変化を通知します	AUTO
useWindowFocus	window.onfocus イベントと window.onblur イベントを使ってウィンドウのフォーカスをリアクティブに追跡します	AUTO
useWindowScroll	リアクティブなウィンドウのスクロール位置	AUTO
useWindowSize	リアクティブなウィンドウサイズ	AUTO

ブラウザー

関数	説明	呼び出し
useBluetooth	リアクティブなWeb Bluetooth API	AUTO
useBreakpoints	リアクティブなビューポートのブレークポイント	AUTO
useBroadcastChannel	リアクティブなBroadcastChannel API	AUTO
useBrowserLocation	リアクティブなブラウザーの位置情報	AUTO
useClipboard	リアクティブなClipboard API	AUTO
useClipboardItems	リアクティブなClipboard API	AUTO
useColorMode	データを自動的に永続化する、リアクティブなカラーモード（ダーク／ライト／カスタム）	AUTO
useCssSupports	SSR に対応したリアクティブなCSS.supports	AUTO
useCssVar	CSS 変数を操作します	AUTO
useDark	データを自動的に永続化する、リアクティブなダークモード	AUTO
useEventListener	EventListener を簡単に使用できます	AUTO
useEyeDropper	リアクティブなEyeDropper API	AUTO
useFavicon	リアクティブなファビコン	AUTO
useFileDialog	ファイルダイアログを簡単に開けます	AUTO
useFileSystemAccess	FileSystemAccessAPI を使用して、ローカルファイルの作成、読み取り、書き込みを行います	AUTO
useFullscreen	リアクティブなFullscreen API	AUTO
useGamepad	Gamepad API 用のリアクティブなバインディングを提供します	AUTO
useImage	ブラウザーで画像をリアクティブに読み込みます	AUTO
useMediaControls	audio 要素と video 要素の両方に対応するリアクティブなメディアコントロール	AUTO
useMediaQuery	リアクティブなメディアクエリ	AUTO
useMemory	リアクティブなメモリ情報	AUTO
useObjectUrl	オブジェクトを表すリアクティブな URL	AUTO
usePerformanceObserver	パフォーマンス指標を監視します	AUTO
usePermission	リアクティブなPermissions API	AUTO
usePreferredColorScheme	リアクティブなprefers-color-scheme メディアクエリ	AUTO
usePreferredContrast	リアクティブなprefers-contrast メディアクエリ	AUTO
usePreferredDark	リアクティブなダークテーマの設定	AUTO
usePreferredLanguages	リアクティブなNavigator Languages	AUTO
usePreferredReducedMotion	リアクティブなprefers-reduced-motion メディアクエリ	AUTO
usePreferredReducedTransparency	リアクティブなprefers-reduced-transparency メディアクエリ	AUTO
useScreenOrientation	リアクティブなScreen Orientation API	AUTO
useScreenSafeArea	リアクティブな env(safe-area-inset-*)	AUTO
useScriptTag	script タグを作成します	AUTO
useShare	リアクティブなWeb Share API	AUTO
useSSRWidth	ビューポートの幅に依存するuseMediaQueryやuseBreakpointsなどの SSR コンポーネントのレンダリング時に使用する、グローバルなビューポート幅を設定します	AUTO
useStyleTag	リアクティブな style 要素を head に挿入します	AUTO
useTextareaAutosize	内容に応じて textarea の高さを自動的に更新します	AUTO
useTextDirection	要素のテキストのリアクティブなdir	AUTO
useTitle	リアクティブなドキュメントタイトル	AUTO
useUrlSearchParams	リアクティブなURLSearchParams	AUTO
useVibrate	リアクティブなVibration API	AUTO
useWakeLock	リアクティブなScreen Wake Lock API	AUTO
useWebNotification	リアクティブなNotification	AUTO
useWebWorker	Web Workers の簡単な登録と通信	AUTO
useWebWorkerFn	UI をブロックせずに、処理負荷の高い関数を実行します	AUTO

Sensors

機能	説明	呼び出し
onClickOutside	要素の外側のクリックを監視します	AUTO
onElementRemoval	要素、またはその要素を含む要素が DOM から削除されたときに実行されます	AUTO
onKeyStroke	キーボードのキー入力を監視します	AUTO
onLongPress	要素の長押しを監視します	AUTO
onStartTyping	ユーザーが編集不可の要素で入力を開始したときに実行されます	AUTO
useBattery	リアクティブな Battery Status API	AUTO
useDeviceMotion	リアクティブな DeviceMotionEvent	AUTO
useDeviceOrientation	リアクティブな DeviceOrientationEvent	AUTO
useDevicePixelRatio	window.devicePixelRatio をリアクティブに追跡します	AUTO
useDevicesList	利用可能な入出力デバイスを一覧表示するリアクティブな enumerateDevices	AUTO
useDisplayMedia	リアクティブな mediaDevices.getDisplayMedia ストリーミング	AUTO
useElementByPoint	ポイント位置にある要素をリアクティブに取得します	AUTO
useElementHover	要素のホバー状態をリアクティブに取得します	AUTO
useFocus	DOM 要素のフォーカス状態を追跡または設定するリアクティブなユーティリティです	AUTO
useFocusWithin	要素またはその子孫のいずれかにフォーカスがあるかを追跡するリアクティブなユーティリティです	AUTO
useFps	リアクティブな FPS（フレーム毎秒）	AUTO
useGeolocation	リアクティブな Geolocation API	AUTO
useIdle	ユーザーが非アクティブかどうかを追跡します	AUTO
useInfiniteScroll	要素の無限スクロール	AUTO
useKeyModifier	リアクティブな 修飾キーの状態	AUTO
useMagicKeys	押されているキーの状態をリアクティブに取得します	AUTO
useMouse	マウス位置をリアクティブに取得します	AUTO
useMousePressed	マウスの押下状態をリアクティブに取得します	AUTO
useNavigatorLanguage	リアクティブな navigator.language	AUTO
useNetwork	リアクティブな ネットワーク状態	AUTO
useOnline	オンライン状態をリアクティブに取得します	AUTO
usePageLeave	マウスがページから離れたかどうかを示す状態をリアクティブに取得します	AUTO
useParallax	パララックス効果を簡単に作成します	AUTO
usePointer	リアクティブな ポインター状態	AUTO
usePointerLock	リアクティブな ポインターロック	AUTO
usePointerSwipe	PointerEvents に基づくスワイプ検出をリアクティブに行います	AUTO
useScroll	スクロール位置と状態をリアクティブに取得します	AUTO
useScrollLock	要素のスクロールをロックします	AUTO
useSpeechRecognition	リアクティブな SpeechRecognition	AUTO
useSpeechSynthesis	リアクティブな SpeechSynthesis	AUTO
useSwipe	TouchEvents に基づくスワイプ検出をリアクティブに行います	AUTO
useTextSelection	Window.getSelection に基づいてユーザーのテキスト選択をリアクティブに追跡します	AUTO
useUserMedia	リアクティブな mediaDevices.getUserMedia ストリーミング	AUTO

ネットワーク

関数	説明	呼び出し
useEventSource	EventSource または Server-Sent-Events のインスタンスが HTTP サーバーへの永続的な接続を開きます	AUTO
useFetch	リアクティブな Fetch API により、リクエストを中止できます	AUTO
useWebSocket	リアクティブな WebSocket クライアント	AUTO

アニメーション

関数	説明	呼び出し
useAnimate	リアクティブな Web Animations API	AUTO
useInterval	インターバルごとに増加するリアクティブなカウンター	AUTO
useIntervalFn	制御機能を備えた setInterval のラッパー	AUTO
useNow	リアクティブな現在の Date インスタンス	AUTO
useRafFn	requestAnimationFrame ごとに関数を呼び出します	AUTO
useTimeout	指定した時間が経過すると true になるリアクティブな値	AUTO
useTimeoutFn	制御機能を備えた setTimeout のラッパー	AUTO
useTimestamp	リアクティブな現在のタイムスタンプ	AUTO
useTransition	値間のトランジション	AUTO

コンポーネント

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

監視

関数	説明	呼び出し
until	変更を一度だけ監視する Promise	AUTO
watchArray	要素の追加と削除を配列で監視	AUTO
watchAtMost	トリガーされる回数を指定する watch	AUTO
watchDebounced	デバウンス付きの監視	AUTO
watchDeep	{deep: true} を指定して値を監視するための省略形	AUTO
watchIgnorable	無視可能な監視	AUTO
watchImmediate	{immediate: true} を指定して値を監視するための省略形	AUTO
watchOnce	{ once: true } を指定して値を監視するための省略形	AUTO
watchPausable	一時停止可能な監視	AUTO
watchThrottled	スロットリング付きの監視	AUTO
watchTriggerable	手動でトリガーできる監視	AUTO
watchWithFilter	追加の EventFilter 制御を備えた watch	AUTO
whenever	値が truthy になるかを監視するための省略形	AUTO

リアクティビティ

関数	説明	呼び出し
computedAsync	非同期関数用の computed	AUTO
computedEager	遅延評価なしの eager computed	AUTO
computedWithControl	computed の依存関係を明示的に定義	AUTO
createRef	deep パラメーターに応じて deepRef または shallowRef を返す	AUTO
extendRef	Ref に属性を追加	AUTO
reactify	通常の関数をリアクティブ関数に変換	AUTO
reactifyObject	オブジェクトに reactify を適用	AUTO
reactiveComputed	リアクティブな computed オブジェクト	AUTO
reactiveOmit	リアクティブオブジェクトからフィールドをリアクティブに除外	AUTO
reactivePick	リアクティブオブジェクトからフィールドをリアクティブに選択	AUTO
refAutoReset	一定時間後に既定値にリセットされる ref	AUTO
refDebounced	ref の値の実行をデバウンス	AUTO
refDefault	ref に既定値を適用	AUTO
refManualReset	手動リセット機能を備えた ref を作成	AUTO
refThrottled	ref の値の変更をスロットリング	AUTO
refWithControl	ref とそのリアクティビティを細かく制御	AUTO
syncRef	ref を双方向に同期	AUTO
syncRefs	ソース ref とターゲット ref を同期した状態に保つ	AUTO
toReactive	ref をリアクティブに変換	AUTO
toRef	値、ref、ゲッターを ref または computed に正規化	EXPLICIT_ONLY
toRefs	オブジェクトの ref も受け取れる拡張版の toRefs	AUTO

配列

関数	説明	呼び出し
useArrayDifference	2 つの配列の差分をリアクティブに取得します	AUTO
useArrayEvery	リアクティブな Array.every	AUTO
useArrayFilter	リアクティブな Array.filter	AUTO
useArrayFind	リアクティブな Array.find	AUTO
useArrayFindIndex	リアクティブな Array.findIndex	AUTO
useArrayFindLast	リアクティブな Array.findLast	AUTO
useArrayIncludes	リアクティブな Array.includes	AUTO
useArrayJoin	リアクティブな Array.join	AUTO
useArrayMap	リアクティブな Array.map	AUTO
useArrayReduce	リアクティブな Array.reduce	AUTO
useArraySome	リアクティブな Array.some	AUTO
useArrayUnique	リアクティブな重複のない配列	AUTO
useSorted	配列をリアクティブにソートします	AUTO

時刻

関数	説明	呼び出し
useCountdown	秒単位のリアクティブなカウントダウンタイマー	AUTO
useDateFormat	渡されたトークン文字列に従って日付をフォーマットします	AUTO
useTimeAgo	リアクティブな経過時間	AUTO
useTimeAgoIntl	国際化に対応したリアクティブな経過時間	AUTO

ユーティリティ

関数	説明	呼び出し
createDisposableDirective	破棄可能なディレクティブを作成するためのユーティリティ	AUTO
createEventHook	イベントフックを作成するためのユーティリティ	AUTO
createUnrefFn	ref と生の値を引数として受け取る通常の関数を作成します	AUTO
get	ref.value にアクセスするための短縮形	EXPLICIT_ONLY
isDefined	Ref の nullish でないことをチェックする型ガード	AUTO
makeDestructurable	オブジェクトと配列の両方として分割代入できるようにします	AUTO
set	ref.value = x の短縮形	EXPLICIT_ONLY
useAsyncQueue	非同期タスクを順番に実行し、現在のタスクの結果を次のタスクに渡します	AUTO
useBase64	リアクティブな Base64 変換	AUTO
useCached	カスタム比較関数を使って ref をキャッシュします	AUTO
useCloned	ref のリアクティブなクローン	AUTO
useConfirmDialog	モーダルや確認ダイアログの連鎖をサポートするイベントフックを作成します	AUTO
useCounter	ユーティリティ関数を備えた基本的なカウンター	AUTO
useCycleList	リスト内の項目を順番に切り替えます	AUTO
useDebounceFn	関数の実行をデバウンスします	AUTO
useEventBus	基本的なイベントバス	AUTO
useMemoize	引数に応じた関数の結果をキャッシュし、リアクティブな状態を保ちます	AUTO
useOffsetPagination	リアクティブなオフセットページネーション	AUTO
usePrevious	ref の前回の値を保持します	AUTO
useStepper	マルチステップのウィザードインターフェースを構築するためのヘルパーを提供します	AUTO
useSupported	SSR に対応した isSupported	AUTO
useThrottleFn	関数の実行をスロットリングします	AUTO
useTimeoutPoll	タイムアウトを使って対象をポーリングします	AUTO
useToggle	ユーティリティ関数を備えたブール値スイッチ	AUTO
useToNumber	文字列 ref をリアクティブに数値へ変換します	AUTO
useToString	ref をリアクティブに文字列へ変換します	AUTO

@Electron

関数	説明	呼び出し
useIpcRenderer	ipcRenderer とそのすべての API を Vue のリアクティビティで利用できます	EXTERNAL
useIpcRendererInvoke	リアクティブな ipcRenderer.invoke API の結果	EXTERNAL
useIpcRendererOn	ipcRenderer.on を簡単に使え、アンマウント時には ipcRenderer.removeListener が自動的に実行されます	EXTERNAL
useZoomFactor	リアクティブな WebFrame のズーム倍率	EXTERNAL
useZoomLevel	リアクティブな WebFrame のズームレベル	EXTERNAL

@Firebase

関数	説明	呼び出し
useAuth	リアクティブな Firebase Auth バインディング	EXTERNAL
useFirestore	リアクティブな Firestore バインディング	EXTERNAL
useRTDB	リアクティブな Firebase Realtime Database バインディング	EXTERNAL

@Head

関数	説明	呼び出し
createHead	head マネージャーのインスタンスを作成します。	EXTERNAL
useHead	head のメタタグをリアクティブに更新します。	EXTERNAL

@Integrations

関数	説明	呼び出し
useAsyncValidator	async-validator のラッパー	EXTERNAL
useAxios	axios のラッパー	EXTERNAL
useChangeCase	change-case のリアクティブなラッパー	EXTERNAL
useCookies	universal-cookie のラッパー	EXTERNAL
useDrauu	drauu のリアクティブなインスタンス	EXTERNAL
useFocusTrap	focus-trap のリアクティブなラッパー	EXTERNAL
useFuse	Fuse.js を使ったコンポーザブルで、あいまい検索を簡単に実装します	EXTERNAL
useIDBKeyval	idb-keyval のラッパー	EXTERNAL
useJwt	jwt-decode のラッパー	EXTERNAL
useNProgress	nprogress のリアクティブなラッパー	EXTERNAL
useQRCode	qrcode のラッパー	EXTERNAL
useSortable	sortable のラッパー	EXTERNAL

@Math

関数	説明	呼び出し
createGenericProjection	createProjection の汎用版	EXTERNAL
createProjection	ある領域から別の領域へのリアクティブな数値射影	EXTERNAL
logicAnd	refs の AND 条件	EXTERNAL
logicNot	ref の NOT 条件	EXTERNAL
logicOr	refs の OR 条件	EXTERNAL
useAbs	リアクティブな Math.abs	EXTERNAL
useAverage	配列の平均値をリアクティブに取得	EXTERNAL
useCeil	リアクティブな Math.ceil	EXTERNAL
useClamp	値をほかの2つの値の間にリアクティブに収める	EXTERNAL
useFloor	リアクティブな Math.floor	EXTERNAL
useMath	リアクティブな Math メソッド	EXTERNAL
useMax	リアクティブな Math.max	EXTERNAL
useMin	リアクティブな Math.min	EXTERNAL
usePrecision	数値の精度をリアクティブに設定	EXTERNAL
useProjection	ある領域から別の領域へのリアクティブな数値射影	EXTERNAL
useRound	リアクティブな Math.round	EXTERNAL
useSum	配列の合計値をリアクティブに取得	EXTERNAL
useTrunc	リアクティブな Math.trunc	EXTERNAL

@Motion

関数	説明	呼び出し
useElementStyle	リアクティブなオブジェクトを対象要素の CSS スタイルに同期	EXTERNAL
useElementTransform	リアクティブなオブジェクトを対象要素の CSS transform に同期します。	EXTERNAL
useMotion	コンポーネントに動きを加えます。	EXTERNAL
useMotionProperties	対象要素の Motion Properties にアクセスします。	EXTERNAL
useMotionVariants	Variants の状態と選択を処理します。	EXTERNAL
useSpring	スプリングアニメーション。	EXTERNAL

@Router

関数	説明	呼び出し
useRouteHash	リアクティブな route.hash の簡易表記	EXTERNAL
useRouteParams	リアクティブな route.params の簡易表記	EXTERNAL
useRouteQuery	リアクティブな route.query の簡易表記	EXTERNAL

@RxJS

関数	説明	呼び出し
from	RxJS の from() と fromEvent() をラップし、ref を受け取れるようにします	EXTERNAL
toObserver	ref を RxJS の Observer に変換する便利関数です	EXTERNAL
useExtractedObservable	1 つ以上のコンポーザブルから抽出した RxJS の Observable を使用します	EXTERNAL
useObservable	RxJS の Observable を使用します	EXTERNAL
useSubject	RxJS の Subject を ref にバインドし、値の変更を双方向に伝播させます	EXTERNAL
useSubscription	購読解除やメモリーリークの心配をせずに、RxJS の Subscription を使用します	EXTERNAL
watchExtractedObservable	1 つ以上のコンポーザブルから抽出した RxJS の Observable の値を監視します	EXTERNAL

@SchemaOrg

関数	説明	呼び出し
createSchemaOrg	schema.org マネージャーのインスタンスを作成します。	EXTERNAL
useSchemaOrg	schema.org をリアクティブに更新します。	EXTERNAL

@Sound

関数	説明	呼び出し
useSound	効果音をリアクティブに再生します。	EXTERNAL