コンポーネント

バージョン5.0では、新しいパッケージ @vueuse/components を導入し、コンポーザブル関数のレンダーレスコンポーネントバージョンを提供しています。

インストール

npm i @vueuse/core @vueuse/components

使用法

例えば、onClickOutside の場合、関数が利用するためにコンポーネントの ref をバインドする代わりに次のようにします：

<script setup>
import { onClickOutside } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

function close() {
  /* ... */
}

onClickOutside(el, close)
</script>

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

バインディングが自動的に行われるレンダーレスコンポーネントを使用できます：

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

function close() {
  /* ... */
}
</script>

<template>
  <OnClickOutside @trigger="close">
    <div>
      Click Outside of Me
    </div>
  </OnClickOutside>
</template>

戻り値

v-slot を使用して戻り値にアクセスできます：

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

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

コンポーネントスタイルの詳細な使用法については、各関数のドキュメントを参照してください。