<Transition appear/> not working

[StitiFatah]

Environment

• Operating System: Linux
• Node Version: v16.19.0
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: devtools, modules
• Runtime Modules: @nuxtjs/tailwindcss@6.8.0, @vueuse/motion/nuxt@2.0.0
• Build Modules: -

Reproduction

https://codesandbox.io/p/sandbox/sleepy-bash-rkcwq7

Describe the bug

The vue docs says : If you also want to apply a transition on the initial render of a node, you can add the appear prop.
https://vuejs.org/guide/built-ins/transition.html#transition-on-appear

There is no transition on the initial render with nuxt, it however works when unmounting/remouting the node afterwards.

Working fine on vanilla vue : https://codesandbox.io/p/sandbox/jovial-kapitsa-qvhxzt

Additional context

No response

Logs

No response

[danielroe]

I think this is a Vue SSR issue - see if you can reproduce without Nuxt with https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter

[danielroe]

Confirmed - see https://stackblitz.com/edit/github-85wcaq?file=src/App.vue. We can track upstream in vuejs/core#6951.

[liqueflies]

@danielroe I still see this issue.
Is there a reason for not planning to resolve it?
Just to understand.

A fairly workaround is to add the same animation at "onMounted" but it's not working at the same mode and we loose the beforeEnter hook.

Thank you so much.

[danielroe]

It's not that we don't want to resolve it, but it is a Vue bug and there is an upstream issue tracking it.

[danielroe]

Oh, I see it is already meant to be resolved. If you are still encountering it please raise a new issue

[liqueflies]

You mean on nuxt repo or vue repo?
I've updated the nuxt dependecy to it's latest version from the demo above:
https://codesandbox.io/p/devbox/nuxt3-appear-4pzthr

Issue still present, if you prefer open a new issue, I'll do that but i think it's the same

[danielroe]

Can you reproduce it with Vue without Nuxt?

[liqueflies]

Can you reproduce it with Vue without Nuxt?

If this is the vue-ssr template that I found on nuxt, yes, the problem is the same:

https://stackblitz.com/edit/github-jer1rm

Is this again related to vue?

[danielroe]

Yes, if it reproducible there then it should be raised upstream at vuejs/core

[liqueflies]

Yes, if it reproducible there then it should be raised upstream at vuejs/core

Opened the issue into the vuejs/core repository.

Thank you so much.

EDIT: Trying into vue play is working correctly

https://play.vuejs.org/#__SSR__eNp9VM1ymzAQfhWVHmhmYnCTnqjT6c9kpu2h7bQ5cpFhwYqFpJEExuPxu3clASGOYy6s9vfbT7s6RF+USroWoixamUIzZYkB26pPuWCNktqSA9FQkSOptGxIjK7xZPomGzXok9QdXKb4Yy5yUUhhMNVG7sidS/CuotzAVS5WaSiDBfBgoVGcWsATISufL0V5lc4MeDR2z52YVLSEBQgLeuHqXo8qDrSDhZXk4BJJRQtm9xlZIpajyzAPtPIkzHfwPPD9uUBaWNbBSXBQhnCrqTDMMikyQjkny+TWEKAGxmxvKzlAXNNiW2vZijIja946D0J2rLQbLL5cqt4rNsDqjZ1r1lKXoFGjemIkZyVGY6pQALn1REXXkTV4AxWrk0cjBV6uL5pHBTLMOOjfyqE0eZQFOM6GiOXup9dZ3bo+g77YQLE9o380vdPl0R8NBnQHeTTZLNU12GC+//cLepQnYyPLlqP3BeNfwOZahzG4fUWiEPbMz6P94eeQifrB3PcWkPyhKQfUeR69fx7hXLrheq31J7i3yQcfh3wii+NMn24H4VTUdxiHaS5tyvlVcOCu0HRpFUrWeQHFdWst8uAPhGT+irH2AN59DcJnOHPxjerjgSH3jcMSu2mpNd2HkZm7KFqWyN9p7DGPRvFzwVmxxYJDB2/cfzQPGHH0ZV3jnQbEaYDs+/KKh2kxCFUKqJ7iXKOkW7BqKIB8fof9Kp31nz5FB24G49lHguDcKyjdW9G9WNvuzM4+W/mXK3wTFnghWzs9CWPi8QUa0772/IxrmYvo+B/+Fc96