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 にある該当ドキュメントで、使用方法と型宣言を確認してください。

状態

Function	Description	Invocation
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
useElementOverflow	要素のオーバーフロー状態をリアクティブに取得します	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

ブラウザー

Function	Description	Invocation
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
useLiveAnnouncer	スクリーンリーダーの利用者にメッセージを通知する、アクセシブルな方法です（ARIA ライブリージョン）	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	head にリアクティブなstyle要素を挿入します	AUTO
useTextareaAutosize	内容に応じて textarea の高さを自動的に更新します	AUTO
useTextDirection	要素のテキストのリアクティブなdir	AUTO
useTitle	リアクティブなドキュメントタイトル	AUTO
useUrlSearchParams	リアクティブなURLSearchParams	AUTO
useVibrate	リアクティブなVibration API	AUTO
useWakeLock	リアクティブなScreen Wake Lock API	AUTO
useWebMCP	WebMCPツールを登録し、そのライフサイクルを現在の Vue スコープに結び付けます	AUTO
useWebNotification	リアクティブなNotification	AUTO
useWebWorker	Web Workersの簡単な登録と通信	AUTO
useWebWorkerFn	UI をブロックせずに、負荷の高い関数を実行します	AUTO

Sensors

Function	Description	Invocation
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	リアクティブな Modifier State	AUTO
useMagicKeys	押されているキーの状態をリアクティブに取得します	AUTO
useMouse	マウス位置をリアクティブに取得します	AUTO
useMousePressed	マウスの押下状態をリアクティブに取得します	AUTO
useNavigatorLanguage	リアクティブな navigator.language	AUTO
useNetwork	リアクティブな Network status	AUTO
useOnline	オンライン状態をリアクティブに取得します	AUTO
usePageLeave	マウスがページから離れたかどうかを示す状態をリアクティブに取得します	AUTO
useParallax	簡単にパララックス効果を作成します	AUTO
usePointer	リアクティブな pointer state	AUTO
usePointerLock	リアクティブな pointer lock	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
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 内のテンプレート要素やコンポーネントに ref をバインドする簡易記法	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	非同期関数向けの算出値	AUTO
computedEager	遅延評価を行わない即時算出値	AUTO
computedWithControl	算出値の依存関係を明示的に定義します	AUTO
createRef	deep パラメーターに応じて deepRef または shallowRef を返します	AUTO
extendRef	Ref に属性を追加します	AUTO
reactify	通常の関数をリアクティブな関数に変換します	AUTO
reactifyObject	オブジェクトに reactify を適用します	AUTO
reactiveComputed	算出されるリアクティブオブジェクト	AUTO
reactiveOmit	リアクティブオブジェクトからフィールドをリアクティブに除外します	AUTO
reactivePick	リアクティブオブジェクトからフィールドをリアクティブに選択します	AUTO
refAutoReset	一定時間後にデフォルト値へリセットされる ref	AUTO
refDebounced	ref の値の実行をデバウンスします	AUTO
refDefault	ref にデフォルト値を適用します	AUTO
refManualReset	手動リセット機能を備えた ref を作成します	AUTO
refThrottled	ref の値の変更をスロットルします	AUTO
refWithControl	ref とそのリアクティビティをきめ細かく制御します	AUTO
syncRef	2 つの 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
useTemporalNow	タイムゾーン変換と暦法のサポートを備えた Temporal API をリアクティブに利用します	AUTO
useTimeAgo	経過時間をリアクティブに取得します	AUTO
useTimeAgoIntl	i18n に対応した経過時間をリアクティブに取得します	AUTO

ユーティリティ

Function	説明	呼び出し
createDisposableDirective	破棄可能なディレクティブを作成するためのユーティリティ	AUTO
createEventHook	イベントフックを作成するためのユーティリティ	AUTO
createUnrefFn	ref と生の値を引数として受け取る通常の関数を作成します	AUTO
get	ref.value にアクセスするための省略記法	EXPLICIT_ONLY
isDefined	Ref 用の、null または undefined ではないことを確認する型ガード	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	string 型の ref をリアクティブに number 型へ変換します	AUTO
useToString	ref をリアクティブに string 型へ変換します	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	ref に対する AND 条件	EXTERNAL
logicNot	ref に対する NOT 条件	EXTERNAL
logicOr	ref に対する 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

Function	Description	Invocation
useElementStyle	リアクティブオブジェクトを対象要素の CSS スタイルに同期します	EXTERNAL
useElementTransform	リアクティブオブジェクトを対象要素の CSS 変換に同期します。	EXTERNAL
useMotion	コンポーネントに動きを加えます。	EXTERNAL
useMotionProperties	対象要素の Motion プロパティにアクセスします。	EXTERNAL
useMotionVariants	Variants の状態と選択を処理します。	EXTERNAL
useSpring	スプリングアニメーションです。	EXTERNAL

@Router

Function	Description	Invocation
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