Laravel + Inertia + Vue3 — Page transition woes

It looks like you're trying to implement page transitions using Vue's <transition> component in a Laravel + Inertia + Vue3 setup. The issue might be related to how the transition classes are being applied and how the v-if directive is being used.

Here’s a refined approach to ensure that the transition classes are correctly applied and the transitions work as expected:

1. Ensure Transition Classes: Make sure you have the necessary CSS classes for the transition. Vue's <transition> component uses specific classes to handle the transition states.

2. Use v-show Instead of v-if: Sometimes using v-if can cause issues because it completely removes the element from the DOM. Using v-show might be more appropriate as it only toggles the visibility.

3. Check Transition Name: Ensure you are using a transition name that matches your CSS classes.

Here’s an updated version of your code:

<script setup>
import { usePage } from '@inertiajs/vue3';
import { reactive, onMounted, onUnmounted } from 'vue';

const props = reactive({ is_loaded: false });

onMounted(() => {
    props.is_loaded = true;
});

onUnmounted(() => {
    props.is_loaded = false;
});
</script>

<template>
    <transition name="fade">
        <div v-show="props.is_loaded">
            <slot />
        </div>
    </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
    opacity: 0;
}
</style>

Explanation:

1. Reactive State: The props object is now correctly initialized with is_loaded: false.

2. Transition Name: The <transition> component is given a name attribute (name="fade"), which will be used to apply the transition classes.

3. CSS Classes: The CSS classes for the transition are defined within a <style scoped> block. These classes handle the transition effects:

   • .fade-enter-active and .fade-leave-active define the duration of the transition.
   • .fade-enter and .fade-leave-to set the initial and final states of the transition.

4. v-show Directive: The v-show directive is used instead of v-if to toggle the visibility of the element without removing it from the DOM.

This should help you achieve the desired page transition effect. If you still encounter issues, ensure that your CSS is correctly loaded and that there are no conflicting styles affecting the transition.