vueuse-integrations-skilld

@vueuse/integrations 15.0.0

VueUse のアドオンです。12 個のユーティリティライブラリ向けにリアクティブなラッパーを提供します。Vue（^3.5.0）が必要で、依存関係として @vueuse/core と @vueuse/shared 15.0.0 が含まれています（package.json:55-70,108-111）。v13 以降は ESM 専用です。v15 以降は Node >= 22 が必要です（package.json:52-54）。

参考資料

• API 全体 — dist/ と照合済みのすべてのエクスポート、シグネチャ、オプション、デフォルト値です。
• 使用パターン — 関数ごとのレシピと注意点です。
• v14 から v15 への移行 — 破壊的変更と更新手順です。

インストール

npm i @vueuse/integrations

各ラッパーには個別のオプションのピア依存関係が必要です。インストールされていない場合、実行時にインポートが失敗します。

コンポーザブル	ピア依存関係
useAsyncValidator	async-validator@^4
useAxios	axios@^1
useChangeCase	change-case@^5
useCookies	`universal-cookie@^7
useDrauu	`drauu@^1
useFocusTrap	`focus-trap@^7
useFuse	fuse.js@^7
useIDBKeyval	idb-keyval@^6
useJwt	jwt-decode@^4
useNProgress	nprogress@^0.2
useQRCode	qrcode@^1.5
useSortable	sortablejs@^1

出典：package.json:55-69。

インポート規則：サブモジュールを使用する

ツリーシェイキングのため、関数ごとのサブモジュールからインポートしてください（README.md:33-42）。

// Preferred
import { useAxios } from '@vueuse/integrations/useAxios'

// Avoid
import { useAxios } from '@vueuse/integrations'

コンポーネントは /component サブパスからインポートしてください。

import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
import { UseSortable } from '@vueuse/integrations/useSortable/component'
import { UseAsyncValidator } from '@vueuse/integrations/useAsyncValidator/component'

エイリアスエクスポートは v14.0.0 で非推奨になりました。元の名前を使用してください（https://github.com/vueuse/vueuse/issues/5009）。

v15 の破壊的変更（v14 から）

1. useIDBKeyval は ref ではなく、オブジェクト { data, isFinished, isSupported, set } を返します（dist/useIDBKeyval.d.ts:46-51）。const count = useIDBKeyval('k', 0) はコンパイルできなくなりました。代わりに data を分割代入してください。
2. useIDBKeyval はデフォルトで BroadcastChannel を介してタブ間を同期します。listenToStorageChanges: false を指定すると無効にできます（dist/useIDBKeyval.js:60-76, https://github.com/vueuse/vueuse/pull/5338）。
3. Node.js 20 のサポートが終了し、Node >= 22 が必要になりました（https://github.com/vueuse/vueuse/releases/tag/v15.0.0）。
4. drauu のピア依存関係の範囲が ^1 || ^0.4 に拡大されました（https://github.com/vueuse/vueuse/pull/5595）。

詳細と移行コードについては、移行リファレンスをご覧ください。

クイックサンプル

useAxios

import { useAxios } from '@vueuse/integrations/useAxios'

// Awaits the whole result; rejects on error
const { data, error } = await useAxios('/api/posts')

// Manual trigger without firing immediately
const { execute } = useAxios('/api/posts', { method: 'GET' }, { immediate: false })

// Typed data via initialData (data becomes Ref<T> instead of Ref<T | undefined>)
const { data } = useAxios<User[]>('/api/users', undefined, { initialData: [] })

execute() は url、config、またはその両方を受け取ります。デフォルトのオプションは immediate（url 文字列が渡された場合のみ true）、shallow: true、abortPrevious: true、resetOnExecute: false です（dist/useAxios.js:13-17,35）。

useIDBKeyval

import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

const { data: count, set } = useIDBKeyval('my-count', 0)
count.value++          // watched, persisted automatically
await set(10)          // explicit write, resolves after the IDB transaction
count.value = null     // deletes the key

useSortable

import { useSortable } from '@vueuse/integrations/useSortable'

const list = ref(['a', 'b', 'c'])
const { start, stop, option } = useSortable(el, list, {
  watchElement: true, // reinitialize when el appears/disappears (v-if)
})

デフォルトの onUpdate ハンドラーは、配列要素を自動で移動します（dist/useSortable.js:14-16）。独自の onUpdate を渡すと上書きできます。手動で移動するには moveArrayElement(list, from, to, e) を使用してください。

useFocusTrap

import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'

const target = useTemplateRef<HTMLElement>('modal')
const { activate, deactivate, hasFocus } = useFocusTrap(target, { immediate: true })

async function open() {
  show.value = true
  await nextTick() // wait for v-if to render the element
  activate()
}

コンテナー要素の変更は自動的に追跡されます。返されるオブジェクトは { hasFocus, isPaused, activate, deactivate, pause, unpause } で、updateContainerElements は含まれません（dist/useFocusTrap.js:37-66）。

useCookies

import { useCookies } from '@vueuse/integrations/useCookies'

const { get, set, remove } = useCookies(['token'], { autoUpdateDependencies: true })

SSR では、createCookies(req) を使ってリクエストからコンポーザブルを作成してください（dist/useCookies.d.ts:4-9）。Nuxt では、Nuxt の useCookie との競合を避けるため、明示的にインポートしてください。

useFuse

import { useFuse } from '@vueuse/integrations/useFuse'

const search = ref('')
const { results } = useFuse(search, data, {
  fuseOptions: { keys: ['title'] },
  resultLimit: 10,
  matchAllWhenSearchEmpty: true,
})

その他のラッパー

useChangeCase('hello world', 'camelCase')   // writable computed; type must match a change-case *Case export
useDrauu(svgEl, { brush: { color: 'red' } }) // target must be an <svg> element
useJwt(token)                                // { header, payload } with fallbackValue on decode error
useNProgress()                               // { isLoading, progress, start, done, remove }
useQRCode('https://vueuse.org')              // ShallowRef<string> of a data URL
useAsyncValidator(form, rules, { manual: true }) // thenable; { pass, errors, execute }

useDrauu、useNProgress、useQRCode、useAsyncValidator を使った複雑なコードを書く前に、使用パターンをご覧ください。

環境上の制限

• Vue ^3.5.0 のピア依存関係が必要です（package.json:68）。
• ESM 専用です。v13.0.0 以降、CommonJS ビルドはありません（https://github.com/vueuse/vueuse/releases/tag/v13.0.0）。
• Node >= 22 が必要です（package.json:53）。
• useQRCode はブラウザーでのみレンダリングされます（isClient ガード、dist/useQRCode.js:16）。
• useIDBKeyval のタブ間同期には BroadcastChannel が必要です。isSupported で対応状況を確認できます（dist/useIDBKeyval.js:18）。