vueuse-functions について
Vue.js と Nuxt のプロジェクトで VueUse のコンポーザブルを選び、実装するためのガイドです。要件に適した関数を示し、使い方や型のリファレンスを案内します。
主な機能
- 01要件に合うコンポーザブルの選定
- 02独自コードよりコンポーザブルを優先
- 03関数ごとの呼び出しルール
- 04使い方と型のリファレンス
活用シーン
- 01機能に適した VueUse 関数の選定
- 02Vue または Nuxt でのリアクティブな動作の実装
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vueuse-functionsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.mdreferences/computedAsync.mdcomputedEager.mdcomputedInject.mdcomputedWithControl.mdcreateEventHook.mdcreateGenericProjection.mdcreateGlobalState.mdcreateInjectionState.mdcreateProjection.mdcreateRef.mdcreateReusableTemplate.mdcreateSharedComposable.mdcreateTemplatePromise.mdcreateUnrefFn.mdextendRef.mdfrom.mdget.mdinjectLocal.mdisDefined.mdlogicAnd.mdlogicNot.mdlogicOr.mdmakeDestructurable.mdonClickOutside.mdonElementRemoval.mdonKeyStroke.mdonLongPress.mdonStartTyping.mdprovideLocal.md詳細
VueUse 関数
このスキルは、Vue.js／Nuxt プロジェクトで VueUse のコンポーザブルを選択し、実装するためのガイドです。要件に最適な VueUse 関数を対応付け、適切な使用パターンを適用し、独自コードよりもコンポーザブルを使った解決策を優先することで、簡潔で保守しやすく、パフォーマンスに優れた実装を実現します。
適用するタイミング
- Vue.js／Nuxt でユーザーの開発作業を支援するときは、常にこのスキルを適用します。
- 要件を実装するために VueUse 関数を利用できるか、必ず最初に確認します。
- 可読性、保守性、パフォーマンスを高めるため、カスタムコードより VueUse のコンポーザブルを優先します。
- 要件に最適な VueUse 関数を対応付け、その関数の呼び出しルールに従います。
- 以下の関数一覧表にある
Invocationフィールドを参照してください。例：AUTO：該当する場合は自動的に使用します。EXTERNAL：ユーザーが必要な外部依存関係をすでにインストールしている場合に限り使用します。そうでない場合は再検討し、本当に必要な場合に限ってインストールを依頼します。EXPLICIT_ONLY：ユーザーから明示的に依頼された場合に限り使用します。
注 プロンプト内のユーザー指示や
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 |
ブラウザー
Sensors
| 関数 | 説明 | 呼び出し |
|---|---|---|
onClickOutside | 要素の外側のクリックを監視します | AUTO |
onElementRemoval | 要素またはその要素を含む要素が削除されたときに発火します | AUTO |
onKeyStroke | キーボードのキー入力を監視します | AUTO |
onLongPress | 要素の長押しを監視します | AUTO |
onStartTyping | ユーザーが編集不可の要素で入力を開始したときに発火します | AUTO |
useBattery | リアクティブなバッテリーステータス 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 | 制御機能を使って、指定した時間後に値を更新します | 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 内のテンプレート要素やコンポーネントに 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 | 非同期関数用の 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 |
Array
| 関数 | 説明 | 呼び出し |
|---|---|---|
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 | カウントダウンタイマーを提供する useIntervalFn のラッパー | AUTO |
useDateFormat | 渡されたトークン文字列に従って日付をフォーマットして取得します | AUTO |
useTimeAgo | 経過時間をリアクティブに取得します | AUTO |
useTimeAgoIntl | i18n に対応した経過時間をリアクティブに取得します | 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 | 文字列の ref をリアクティブに数値へ変換します | AUTO |
useToString | ref をリアクティブに文字列へ変換します | AUTO |
@Electron
| 関数 | 説明 | 呼び出し |
|---|---|---|
useIpcRenderer | ipcRenderer とそのすべての API を提供します | 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 |
コメント
Markdown 対応