vue.jsvue-router4

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

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 ?

Solution

  • 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.