I'm doing some late night tinkering trying to get the View Transitions API working with Inertia JS. The API provides a really simple way to offload a lot of the work in creating page transitions off to the browser. It's currently only supported in Chrome/Chromium based browsers, but it is very cool.

This snippet can probably be simplified, but here is my implementation. This goes in my AuthenticatedLayout.vue component using the Composition API.

import { onUnmounted } from "vue";

if (document.startViewTransition) {
    function handleInertiaStart() {
        document.startViewTransition(async () => {
            return new Promise((resolve) => {
                document.addEventListener(
                    "inertia:finish",
                    () => {
                        resolve();
                    },
                    { once: true },
                );
            });
        });
    }
    document.addEventListener("inertia:start", handleInertiaStart);
    onUnmounted(() => {
        document.removeEventListener("inertia:start", handleInertiaStart);
    });
}