Simplify the Composition API and avoid passing a ref

[edimitchel]

I take a look on the way tippy is used in Composition API, and I wondering if it could be simplified ?

Instead of creating and passing a target ref like:

<template>
  <button ref="btn">Tippy!</button>
</template>

<script setup>
import { useTippy } from 'vue-tippy'
import Counter from '@components/Counter.vue'

const btn = ref()

useTippy(btn, {
  content: h(Counter, { initialCount: 42 }),
  arrow: true,
})
</script>

... take the target returned by the composable and pass it to the dom:

<template>
  <button ref="btn">Tippy!</button>
</template>

<script setup>
import { useTippy } from 'vue-tippy'
import Counter from '@components/Counter.vue'

const { target: btn } = useTippy({
  content: h(Counter, { initialCount: 42 }),
  arrow: true,
})
</script>

The composable would be responsible to create the ref, then reassigned by Vue on mounting.

What do you think?

[KABBOUCHI]

maybe like this?

const { target: btn } = useTippy({
  content: h(Counter, { initialCount: 42 }),
  arrow: true,
})

[edimitchel]

Yes sorry, I forgot to remove the btn param