Vue 3.0 router components transition does not work with mode="out-in"

Question

I building an application with vue 3.0 and vue-router 4.0.

I have this very simple code in my App.vue component (first rendered component) :

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in" appear>
        <component :is="Component"></component>
    </transition>
</router-view>

First page is renderer - no problem. But as soon as I navigate to another page, page become blank. If I remove the mode="out-in" it works (but transition is ugly).

Does anyone know why ?

It could be a CSS problem unless the router is configured incorrectly. There's not enough code in the post to tell — Dan, Feb 28 '21 at 18:10
Why do you place the transition inside router-view instead of wrapping router-view inside it ?!? — IVO GELOV, Feb 28 '21 at 18:18
@IVOGELOV : This is how it must be done with vue 3 (vue-router 4) see https://next.router.vuejs.org/guide/advanced/transitions.html — 37 Degres, Mar 02 '21 at 06:26

score 11 · Accepted Answer · answered Mar 02 '21 at 06:25

11

I finally found were the mistake was, and how stupid it was...

In my template, I put a comment before the first tag:

<template>

    <!-- login layout --> <=== NOT A GOOD IDEA...
    <div class="lsn-login">
        ...
    </div>

</template>

Thank you for all your comment.

answered Mar 02 '21 at 06:25

37 Degres

141
7

2

Thanks, it helped! Mark it as answer! This is really weird, comments must not affect rendering. – Georgiy Bukharov Feb 25 '22 at 12:40
Faced this problem today. Spent solid 2 hours reading through official documents and migrations [here](https://router.vuejs.org/guide/migration/#router-view-keep-alive-and-transition) and [there](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0034-router-view-keep-alive-transitions.md#summary). Just to finally comes out that my comment is the problem. This is wierd – Huy Phạm May 25 '22 at 03:16
Thanks a lot, I would have search for hours, couldn't imagine this problem – Alex Baur Nov 01 '22 at 14:44
To be clear, the answer is a combination of this and Fabio Almeida's below: the real answer is that you can only have 1 root node when using transitions (with the comment counting as a node) – Charles Chen Jun 21 '23 at 17:12

Fabio Almeida · Answer 2 · 2022-08-08T18:49:21.950

3

Each template can only have one tag (element). The following example would break the transitions

<template>
  <div class="about"></div>
  <img class="back-img" src="/artwork/58.webp"/>
</template>

edited Aug 08 '22 at 18:49

answered Jul 11 '22 at 13:53

Fabio Almeida

177
7

FreezeNow · Answer 3 · 2023-03-27T02:02:32.670

2

The reason for this problem is that transition only supports a single element. The official document hints:

<Transition> only supports a single element or component as its slot content. 
If the content is a component, the component must also have only one single root element.

You can see a demo in this link: https://stackblitz.com/edit/vitejs-vite-gwfbmb?file=src%2FApp.vue

edited Mar 27 '23 at 02:02

answered Mar 27 '23 at 01:21

FreezeNow

21
2

Vue 3.0 router components transition does not work with mode="out-in"

3 Answers3

Linked