Description
What package within Headless UI are you using?
"@headlessui/vue"
What version of that package are you using?
1.7.22
What browser are you using?
Chrome
Reproduction URL
I copied fragment from docs: https://headlessui.com/v1/vue/transition
<template>
<button @click="isShowing = !isShowing">Toggle</button>
<TransitionRoot :show="isShowing">
I will appear and disappear.
</TransitionRoot>
</template>
<script setup>
import { ref } from 'vue'
import { TransitionRoot } from '@headlessui/vue'
const isShowing = ref(true)
</script>
and pasted into component called TransitionDebug
I have "vue": "3.4.14" with vite 5.
Describe your issue
I added this component to app inside of Setting component and after page load I see
main.ts:22 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.
at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave> ... >
at <Anonymous show=true >
at <TransitionDebug>
at <Settings onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
I can see paragraph I will appear and disappear.
When I clicking toggle button, I see warning in console
TransitionDebug.vue:2 [Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function.
at <Anonymous onBeforeEnter=fn<onBeforeEnter> onAfterEnter=fn<onAfterEnter> onBeforeLeave=fn<onBeforeLeave> ... >
at <Anonymous show=false >
at <TransitionDebug>
at <Settings onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {saveSettings: ƒ, …} > >
at <RouterView>
at <App>
but paragraph is constantly displayed.
I have another project with nuxt, where this error is not possible to reproduce.
Potentially linked issues:
#959 Bug: Dialog and TransitionRoot is not working as documented
#2939 Transition broken with vue v3.4.15
Update
Now inspired by @albertpratomo I fixing by
<transition name="fade">
<span v-if="isShowing">I will appear and disappear.</span>
</transition>
instead of
<TransitionRoot :show="isShowing">
I will appear and disappear.
</TransitionRoot>