Vue version

3.3.4

Link to minimal reproduction

Broken Transition

Steps to reproduce

• Create a reusable Transition Component
• Import the component into another component as BaseTransition.
• import BaseTransition from 'file-path/base-transition.vue
• Use BaseTransition in your Template by wrapping a DOM element.
• Observe that the effect of the transition is never executed. Instead the wrapped Component is rendered instantly.

What is expected?

BaseTransition should be an allowed name for a custom component.

<BaseTransition>
 <p v-if="show"> should fade in / fade out</p>
</BaseTransition>

What is actually happening?

The transition effect never starts. Instead the wrapped element is rendered instantly

System Info

No response

Any additional comments?

If my reusable Transtition is imported under another name it works just fine. But according to official Docs / Conventions vue recommends using Base prefix or at least using it as an example / possible prefix.

conventions

So, why not change the name?

Use FadeTransition instead.

To make my problem a bit clearer I have kept the example of the transition component simple. In fact, I use it in such a way that a transition name is passed as prop, which then dynamically decides which transition is executed. I think the name BaseTransition is appropriate and I don't plan to change it. Especially since I have more than one component prefixed with Base.