In v5.0, we introduced a new package @vueuse/components providing renderless component style usage of composable functions.

For example of onClickOutside instead of

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

const el = ref()

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

onClickOutside(el, close)

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

You can now use it in the component way:

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

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

Similarly, you can also access return values with v-slot:

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


$ npm i @vueuse/core @vueuse/components

Refer to each function's documentation for the detailed usage of component style.