VueUse Functions

このスキルは、Vue.js / Nuxt プロジェクトで VueUse composables を使用するための判断・実装ガイドです。要件を最適な VueUse 関数にマッピングし、正しい使用パターンを適用し、実装を簡潔で保守性が高く、パフォーマンスに優れたものに保つために、カスタムコードよりも composable ベースのソリューションを優先します。

適用時期

• Vue.js / Nuxt でユーザーの開発作業を支援する場合は常にこのスキルを適用します。
• 要件を実装できる VueUse 関数があるかどうかを最初に確認してください。
• 可読性、保守性、パフォーマンスを向上させるために、カスタムコードよりも VueUse composables を優先します。
• 要件を最も適切な VueUse 関数にマッピングし、その関数の呼び出しルールに従います。
• 以下の関数テーブルの Invocation フィールドを参照してください。例えば：
  • AUTO: 適用可能な場合は自動的に使用します。
  • EXTERNAL: ユーザーが必要な外部依存をすでにインストールしている場合のみ使用します。そうでない場合は再検討し、本当に必要な場合のみインストールするよう提案します。
  • EXPLICIT_ONLY: ユーザーが明示的にリクエストした場合のみ使用します。

  注意 プロンプトまたは AGENTS.md のユーザー指示は、関数のデフォルト Invocation ルールをオーバーライドすることがあります。

関数

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

重要: 各関数エントリには、短い Description と詳細な Reference が含まれています。任意の関数を使用する際は、常に ./references の対応するドキュメントで使用方法と型定義を確認してください。

State

Function	Description	Invocation
createGlobalState	状態をグローバルスコープで保持し、Vue インスタンス間で再利用可能にします	AUTO
createInjectionState	コンポーネントにインジェクト可能なグローバル状態を作成します	AUTO
createSharedComposable	composable 関数を複数の 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

Elements

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

Browser

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
useMediaControls	audio および video 要素の両方のリアクティブなメディアコントロール	AUTO
useMediaQuery	リアクティブな Media Query	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	スクリプトタグを作成します	AUTO
useShare	リアクティブな Web Share API	AUTO
useSSRWidth	useMediaQuery や useBreakpoints などのビューポート幅に依存する SSR コンポーネントをレンダリングするときに使用されるグローバルビューポート幅を設定するために使用されます	AUTO
useStyleTag	ヘッドにリアクティブな style 要素を注入します	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

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	リアクティブな ポインタ状態	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

Network

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

Animation

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

Component

Function	Description	Invocation
computedInject	computed と inject を組み合わせます	AUTO
createReusableTemplate	コンポーネントスコープ内でテンプレートを定義して再利用します	AUTO
createTemplatePromise	テンプレートをプロミスに	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 内のテンプレート要素とコンポーネントへの ref バインディングの短記法	AUTO
useVirtualList	バーチャルリストを簡単に作成します	AUTO
useVModel	v-model バインディングの短記法	AUTO
useVModels	props v-model バインディングの短記法	AUTO

Watch

Function	Description	Invocation
until	変更に対する約束された一度だけの watch	AUTO
watchArray	追加と削除を伴う配列を watch します	AUTO
watchAtMost	トリガーされる回数を制限する watch	AUTO
watchDebounced	デバウンス watch	AUTO
watchDeep	{deep: true} で値を watch する短記法	AUTO
watchIgnorable	無視可能な watch	AUTO
watchImmediate	{immediate: true} で値を watch する短記法	AUTO
watchOnce	{ once: true } で値を watch する短記法	AUTO
watchPausable	一時停止可能な watch	AUTO
watchThrottled	スロットル watch	AUTO
watchTriggerable	手動でトリガーできる watch	AUTO
watchWithFilter	追加の EventFilter 制御を備えた watch	AUTO
whenever	値が真になることを watch する短記法	AUTO

Reactivity

Function	Description	Invocation
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	双方向 refs 同期	AUTO
syncRefs	ターゲット refs をソース ref と同期したままにします	AUTO
toReactive	ref をリアクティブに変換します	AUTO
toRef	値/ref/getter を ref または computed に正規化します	EXPLICIT_ONLY
toRefs	オブジェクトの refs も受け入れる拡張された toRefs	AUTO

Array

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

Time

Function	Description	Invocation
useCountdown	リアクティブなカウントダウンタイマー（秒単位）	AUTO
useDateFormat	渡されたトークン文字列に従ってフォーマットされた日付を取得します	AUTO
useTimeAgo	リアクティブな時間経過	AUTO
useTimeAgoIntl	i18n サポート付きのリアクティブな時間経過	AUTO

Utilities

Function	Description	Invocation
createEventHook	イベントフックを作成するためのユーティリティ	AUTO
createUnrefFn	ref と生の値を引数として受け入れるプレーン関数を作成します	AUTO
get	ref.value にアクセスするための短記法	EXPLICIT_ONLY
isDefined	Ref の非 null チェック型ガード	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

Function	Description	Invocation
useIpcRenderer	ipcRenderer と Vue リアクティビティを備えたそのすべての API を提供します	EXTERNAL
useIpcRendererInvoke	リアクティブな ipcRenderer.invoke API 結果	EXTERNAL
useIpcRendererOn	ipcRenderer.on を簡単に使用し、アンマウント時に ipcRenderer.removeListener を自動的に実行します	EXTERNAL
useZoomFactor	リアクティブな WebFrame ズーム係数	EXTERNAL
useZoomLevel	リアクティブな WebFrame ズームレベル	EXTERNAL

@Firebase

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

@Head

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

@Integrations

Function	Description	Invocation
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 で composable を使用してファジー検索を簡単に実装します	EXTERNAL
useIDBKeyval	idb-keyval のラッパー	EXTERNAL
useJwt	jwt-decode のラッパー	EXTERNAL
useNProgress	nprogress のリアクティブラッパー	EXTERNAL
useQRCode	qrcode のラッパー	EXTERNAL
useSortable	sortable のラッパー	EXTERNAL

@Math

Function	Description	Invocation
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	ターゲット要素のモーションプロパティにアクセスします。	EXTERNAL
useMotionVariants	バリアント状態と選択を処理します。	EXTERNAL
useSpring	スプリングアニメーション。	EXTERNAL

@Router

Function	Description	Invocation
useRouteHash	リアクティブな route.hash の短記法	EXTERNAL
useRouteParams	リアクティブな route.params の短記法	EXTERNAL
useRouteQuery	リアクティブな route.query の短記法	EXTERNAL

@RxJS

Function	Description	Invocation
from	RxJS の from() と fromEvent() をラップして ref を受け入れられるようにします	EXTERNAL
toObserver	ref を RxJS Observer に変換するシュガー関数	EXTERNAL
useExtractedObservable	1 つ以上の composables から抽出した RxJS Observable を使用します	EXTERNAL
useObservable	RxJS Observable を使用します	EXTERNAL
useSubject	RxJS Subject を ref にバインドし、両方向で値変更を伝播します	EXTERNAL
useSubscription	RxJS Subscription を使用し、購読解除やメモリリークについて心配する必要がありません	EXTERNAL
watchExtractedObservable	1 つ以上の composables から抽出した RxJS Observable の値を watch します	EXTERNAL

@SchemaOrg

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

@Sound

Function	Description	Invocation
useSound	サウンドエフェクトをリアクティブに再生します。	EXTERNAL