vue-floating-fantasy is hooks and vue component library based on Floating UI implementation for Vue 2 & 3.
Use with Vue Composition API (view docs).
npm i @vue-floating-fantasy/core🏗️ In construction...
import { useFloating, ReferenceType, FloatingType } from '@vue-floating-fantasy/core'
const referenceRef = ref<ReferenceType>()
const floatingRef = ref<FloatingType>()
const {
data, // return value form computed position
update, // force computed position
stop // stop watch options change
} = useFloating(referenceRef, floatingRef)
const floatingStyleRef = computed(() => {
const floatingData = data.value
return {
position: floatingData.strategy,
top: `${floatingData.y}px`,
left: `${floatingData.x}px`
}
})
onBeforeUnmount(stop)useFloating is designed to recalculate the position only when any of the [referenceRef, floatingRef, optionsRef] changes, if you want it to update automatically when the DOM position changes, you can use useAutoUpdate
import { useAutoUpdate } from '@vue-floating-fantasy/core'
const stopAutoUpdate = useAutoUpdate(referenceRef, floatingRef, update)
onBeforeUnmount(stopAutoUpdate)MIT