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 ?

Answer 1

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.

Answer 2

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>