Using a builtin tree-shakable component like <transition> in a dynamic component requires manual import.

[sarangnx]

Version

3.0.0

Reproduction link

https://jsfiddle.net/sarangnx/t9L4fznc/23/

Steps to reproduce

When you click on the button, only first two components are having correct transitions, the third one is not behaving as expected.

What is expected?

It is expected the following two code,

1. Using transition component directly

<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</transition>

2. Using transition component with Dynamic component

<component :is=" 'transition' "
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</component>

to work exactly same way, and render as given below in browser.

<div>Transition working</div>

What is actually happening?

The third component given in the jsFiddle (one using dynamic component) is rendered in the browser as below.

<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</transition>

instead of just this

<div>Transition working</div>

It seems like vue has not identified the component, so just replacing it like a <div> tag.

---

Ultimate goal was to build a reusable transition component with slots, and switch between using <transition> and <transition-group> with the help of dynamic components <component :is="group ? 'transition-group' : 'transition' ">.

moved from vue-next isuues to docs-next vuejs/core#2238

[LinusBorg]

Note to my fellows from the docs team: read the linked issue, I wrote there about how this is about tree shaking and needs documentation

[skirtles-code]

Working on documenting this now, as well as the related problem of using the built-in components with a render function.