vueuse-components-skilld

@vueuse/components 15.0.0

@vueuse/core のコンポーザブルを囲む、描画なしコンポーネントとディレクティブのラッパーです。46 個のコンポーネント、14 個のディレクティブ、2 個の非推奨ディレクティブエイリアスがあります（dist/index.js:1237）。

事実（すべての引用元は、準備済みの @vueuse/components パッケージ内のパスです）：

• バージョン 15.0.0（package.json:4）；@vueuse/core 15.0.0 および @vueuse/shared 15.0.0 に依存します（package.json:43-44）
• ピア依存関係：vue ^3.5.0（package.json:40）
• Node.js >=22（package.json:37）；v15 で Node 20 のサポートが終了しました
• ESM のみ（"type": "module"、package.json:3）；CJS ビルドはありません
• sideEffects: false で、ツリーシェイク可能です（package.json:22）；CDN 向けに unpkg／jsdelivr から IIFE バンドルを利用できます（package.json:30-31）
• インストール：npm i @vueuse/components @vueuse/core（README.md:10、https://vueuse.org/guide/components）

コンポーネントの動作

描画する内容によって、2 つの種類に分かれます（dist/index.js で確認済み）。

1. 描画のみのコンポーネント：独自の DOM を持たず、デフォルトスロットのみを描画します。スコープ付きスロットには、コンポーザブルの戻り値がリアクティブな形で渡されます。例：UseMouse（dist/index.js:805-809）。
2. 要素ラッパー：要素（props.as || "div"）を 1 つ描画し、その ref をコンポーザブルに渡します。スロットのコンテンツは子要素になります。この要素がコンポーザブルのターゲットです。例：UseElementBounding（dist/index.js:340-345）。

要素ラッパーコンポーネント：OnClickOutside、OnLongPress、UseDraggable、UseElementBounding、UseElementOverflow、UseElementSize、UseElementVisibility、UseFullscreen、UseImage（デフォルトスロットがない場合は img を描画）、UseMouseInElement、UseMousePressed、UsePointerLock、UseScreenSafeArea、UseVirtualList（独自のコンテナー／ラッパー div を使用）。

それ以外はすべて描画のみのコンポーネントです。props、スロットデータ、emit を含む全カタログ：references/components.md。

よくあるタスク

マウス位置（公式ガイドのパターン、https://vueuse.org/guide/components）：

<template>
  <UseMouse v-slot="{ x, y }">
    x: {{ x }} y: {{ y }}
  </UseMouse>
</template>

ダークモードの切り替え；UseDark のスロットデータは { isDark, toggleDark } です（dist/index.js:173-178）：

<template>
  <UseDark v-slot="{ isDark, toggleDark }">
    <button @click="toggleDark()">Is Dark: {{ isDark }}</button>
  </UseDark>
</template>

コンポーネント形式での外側クリック。OnClickOutside は options prop を受け取り、trigger を emit します。描画される div がターゲットです（dist/index.js:5-17）：

<OnClickOutside :options="{ ignore: [ignoreElRef] }" @trigger="close">
  <div>Click outside of me</div>
</OnClickOutside>

ディレクティブ形式。[handler, options] タプルでバインドします（dist/index.js:26-29）：

<script setup>
import { vOnClickOutside } from '@vueuse/components'
</script>

<template>
  <div v-if="modal" v-on-click-outside="[closeModal, { ignore: [ignoreElRef] }]">
    Hello World
  </div>
</template>

読み込みスロットとエラースロットを備えた画像（dist/index.js:763-770）：

<UseImage src="https://place.dog/300/200">
  <template #loading>Loading..</template>
  <template #error>Failed</template>
</UseImage>

位置を保持するドラッグ可能な要素；storage-key で useStorage による永続化を有効にし、storage-type で local（デフォルト）または session を選択します（dist/index.d.ts:157-168、dist/index.js:286-300）：

<UseDraggable storage-key="panel-pos" :initial-value="{ x: 10, y: 10 }" v-slot="{ x, y, style }">
  <div :style="style">Drag me at {{ x }}, {{ y }}</div>
</UseDraggable>

適用するルール

• コンポーネントとディレクティブは、@vueuse/components から名前付きエクスポートとしてインポートしてください。app.use() プラグインはありません。必要に応じて、独自にグローバル登録してください（app.component('UseMouse', UseMouse)）。
• On* コンポーネントでは、設定を options プロパティで渡し、ハンドラープロパティではなく @trigger イベントで反応してください（dist/index.js:15-16, 66-68）。
• 要素をラップするコンポーネントでは、as を設定してレンダリングされる要素を変更します。例：as="section"（dist/index.js:11）。例外として、UseScreenSafeArea は型で as が宣言されていますが、実行時の props 配列には含まれていないため、常に div をレンダリングします（dist/index.js:1096-1101 vs dist/index.d.ts:548-553）。
• UseIdle には timeout プロパティが必要です（dist/index.d.ts:297-299）。
• UseVirtualList には list と options プロパティが必要です。height のデフォルト値は 300px です。テンプレート参照を介して scrollTo(index) を呼び出せます（dist/index.d.ts:590-610, dist/index.js:1190-1206）。
• UseObjectUrl はオブジェクト URL が存在してからスロットをレンダリングします。スロットプロパティは URL 文字列です（dist/index.js:906-915）。
• UseOffsetPagination は、ページネーションの状態全体を含む page-change、page-size-change、page-count-change を発行します（dist/index.js:918-951）。
• UsePointer は target="window"（デフォルト）または target="self" を受け付けます（dist/index.d.ts:463-465, dist/index.js:976-984）。
• 非推奨のエクスポート VOnClickOutside と VOnLongPress は使用しないでください。これらは vOnClickOutside / vOnLongPress のエイリアスです（dist/index.d.ts:17-18, 43-44）。
• ディレクティブのバインディング値には、ハンドラー関数、または [handler, options] タプルを指定します。vElementSize は [handler, initialSize, options] を受け取り、vScrollLock はブール値を受け取ります。詳細と修飾子については、references/directives.md を参照してください。

参考資料

• references/components.md — 全46コンポーネントのカタログ。プロパティ、スロットデータの形式、イベント、レンダリングされる要素を記載
• references/directives.md — 全14ディレクティブ。バインディング値の形式、修飾子、ハンドラーのペイロードを記載
• references/migration.md — v13 から v15 へのバージョン固有の変更と、公式リリース URL

公式ドキュメント：https://vueuse.org/guide/components