Thanks to user Mohkoma for sharing this solution, it helped me a lot to implement transitions in my project with Inertia. I just wanted to make a small improvement: if you wrap the only around the main content, instead of spanning the entire page, the animation will affect only the content and not the header or footer. Here is an example of how I implemented it:

<template>
    <AppHeader />
    <main class="max-w-7xl">
        <Transition name="fade" mode="out-in" appear>
            <div :key="$page.url">
                <slot />
            </div>
        </Transition>
    </main>
    <AppFooter />
</template>