[Vuejs]-I can't add Vue page transition with inertia js in vue js

Vue transition works when the element that is wrapped by the transition tag changes (inserted or removed). Since inertia uses the backend route, simulating a page change should help with this. – This is not optimal but it works!

<section class="adminPanel" :style="contentStyle">
    <AdminSvg/>
    <header-admin :style="headerStyle"/>
    <transition name="slide-fade">
        <div v-if="content-trigger" class="content">
            <slot></slot>
          

        </div>
    </transition>
        <sidebar-admin :style="sidebarStyle"/>
</section>
<style>
    /* durations and timing functions.*/
    .slide-fade-enter-active {
        transition: all .5s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
<script>
    export default {
        data() {
            return {
                content-trigger:false
            }
        },
        mounted(){
            this.content-trigger = true;
        }
    }
</script>

Here is a simple solution that can help.
In the Layout component, Use the $page.url of the current url as a key 🎉.

<transition name="fade" mode="out-in" appear>
     <div :key="$page.url">
          <slot  />
     </div>
</transition>