How do I add page transitions with Inertia and vue?

[ApolloDevs]

I have attempted a few examples that I have found online but sadly I haven't really got anywhere. I'm using the Laravel adapter with InertiaJS and Vue and TailwindCSS.

Say I have the following layout -

<AppLayout>
<ProfileSidebar />
<Slot></Slot>
<AppLayout />

How would I make the items inside the slot transition when selecting a new page from the sidebar? I've tried the class with CSS in a <style> tag in the component but no transitions take place. (with wrapped around the slot!) Looking for a basic example to get me off the ground!

Thank you.

[ajnsn]

@ApolloDevs Try to wrap your slot with a Vue transition, e.g.

<transition name="fade" mode="out-in" appear>
    <slot />
</transition>

CSS for Vue 3

.fade-enter-active,
.fade-leave-active {
    @apply transition-opacity;
}

.fade-enter-from,
.fade-leave-to {
    @apply opacity-0;
}

[MajidAtaei1993]

            <!-- Logo Card -->
            <v-card class="text-center border-b" flat>
                <v-card-title>
                    <v-avatar size="60" image="/images/logo-circle.png" />
                </v-card-title>
                <v-card-text class="pb-0">
                    Betasport
                </v-card-text>
                <v-card-actions>
                    <v-btn size="small" v-for="(item, i) in events.icons" :key="i" :icon="item.icon" :color="item.color"></v-btn>
                </v-card-actions>
            </v-card>


            <!-- navLinks -->
            <v-list color="transparent" flat>
                <Link v-for="(nav, i) in events.navLinks" :key="i" :href="route(nav.route)">
                    <v-list-item :title="nav.title" :subtitle="nav.subtitle" :prepend-icon="nav.prependIcon" :class="route().current() === nav.route ? 'text-secondary border' : ''" />
                </Link>
            </v-list>

            <!-- bottom actions -->
            <template #append>
                <v-list-item title="Change Theme" class="border-b border-t">
                    <template #append>
                        <v-icon :color="events.theme === 'dark' ? 'warning' : 'background'">mdi-theme-light-dark</v-icon>
                    </template>
                </v-list-item>
                <v-list-item title="Logout">
                    <template #append>
                        <v-icon color="error">mdi-logout</v-icon>
                    </template>
                </v-list-item>
            </template>
        </v-navigation-drawer>

        <!-- main transition -->
        <v-main>
            <transition name="fade">
                <div v-show="props.is_loaded">
                    <v-container>
                        <slot />
                    </v-container>
                </div>
            </transition>
        </v-main>
    </v-app>
</v-responsive>

<script setup lang="ts"> import { reactive, onMounted, onUnmounted } from 'vue' import { Link, usePage } from '@inertiajs/vue3' const page = usePage() const props = reactive({ is_loaded: false }) onMounted(() => { props.is_loaded = true; }) onUnmounted(() => { props.is_loaded = false; }) interface NavLinks{ title: string, subtitle?: string, route: string, prependIcon: string } const events = reactive({ drawer: true, theme: 'dark', icons:[ { icon:'mdi-calendar', href:'' }, { icon:'mdi-email', href:'' }, { icon:'mdi-card-account-details', href:'' }, { icon:'mdi-message-badge', href:'' }, { icon:'mdi-logout', href:'', color:'error'}, ], navLinks:[ { title:'Home', subtitle:'', route:'vendor', prependIcon:'mdi-home' }, { title:'Users', subtitle:'Add & Update', route:'vendor-users', prependIcon:'mdi-account-group' }, ] as NavLinks[] }) </script> <style scoped lang="scss"> .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>