<Transition appear>, wrapped in another node, doesn't work with Suspense

[upschk]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9UsFu1DAQ/ZWpL700CRWclhAJUCXgAIj26IvlzG5dHNvyONmtqv13xnGyXVDpzTPz3vjNm3kSH0OopxHFRrSkowkJCNMYOunMEHxM8NkPAbbRD3BZNznI8Mv30rVNITCUg4RDsCohRwDt7UgBHZWI47lJU2rNWbFtznjiSiTS3m3Nrn4g71jTU2ZIoZluLMYfIRnvSIoNzJVcU9b6/bc5l+KIV2te36P+/UL+gQ45J8XPiIRxQilOtaTiDlMp39x+xwO/T8XB96Nl9CvFX0jejlljgX0aXc+yz3Cz2q+zs8bt7ujmkNiKdagsNCOPM14Kdjo797/Rn+W+rd/NPOmO7OK6pReW+trSLqoK2t5MoK0i+iDFPqoQsvwOqmpd5V1ULDiLAacGZNhW9WwLZKyKC4yB99fdF+RxYe+j7S/ahhNLj+a5ydnXDf+9/PTXXXBI6dEi8HEE7DueIYcdTzo/ak3Eo9ZZR4UuYayUTmbKOy9Ji2rCJVnsSycBG/BBaZMe4ZoAFSGfNvu4Uku/fP//dEu+dFrYG3iTieL4B5bSGqk=

Steps to reproduce

1. Uncomment <div class="wrapper">.
2. Refresh the page.

What is expected?

The h1 element fades in on refresh.

What is actually happening?

The element just appears without any transition.

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 139.14 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - /opt/homebrew/bin/node
    npm: 10.8.3 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 18.0.1
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

I have a project which uses transitions with 'appear' prop a lot, and they stopped working when I added Suspense in App.vue. You can see that they work at the root of the component, however this can't always be possible.

Transitions also work if the component is displayed by RouterView and the RouterView is wrapped in Suspense:

<Suspense>
  <RouterView />
</Suspense>

But this isn't the recommended way and is probably wrong.

Updated: transitions also work if wrapped in <Suspense suspensible>: Playground

[edison1105]

the recommended way is

<Transition>
  <Suspense>	
  </Suspense>
</Transition>

see https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

[cernymatej]

sometimes, it is not possible to change the order of those components

for example, my modal components have the following structure:

<Teleport>
  <Transition>
    <div>

and I would like to wrap them in an async component wrapper with suspense elsewhere

is it considered a bug or will Vue support only the mentioned order of transition + suspense?

[mikehwagz]

An example of this being an issue is that it seems to break appear for Nuxt page transitions. I created a reproduction of that here: https://github.com/mikehwagz/vue-nuxt-transition-bug

Here is an issue in the Nuxt repo about this: nuxt/nuxt#14715

cc @danielroe

If this is actually a Nuxt bug, I am happy to create an issue there. Let me know how I can help!

[DanyloIvashev]

we cannot change the order in NuxtPage @edison1105