Posts Learn Components Snippets Categories Tags Tools About
/

How to Add Page Transition In Inertia JS

Learn How to Add Page Transition In Inertia JS to make the user experience of your page better

Created on Jun 21, 2022

542 views

There are 3 steps that you can do to add page transitions in Inertia JS, let's get started

Step 1: Create Layout File


The first step is to create the layout file and it's usually located inside the resources/js/Layouts/[laout-name].vue directory. In my case, my layout will be called "Base.vue".
resources/js/Layouts/Base.vue
The content of the base layout file will be as follows.
<script setup>
    import Header from '@/Components/Header';
    import Footer from '@/Components/Footer';
</script>

<template>
    <Header/>

    // main content goes here

    <Footer/>
</template>

Step 2: Wrap Main Content With Transition


The next step is to wrap the main content with the transition component and it's very important to have the whole page wrapped with this. If you do want to add a transition for the header and footer then make sure it's within the transition component.
<transition name="page" mode="out-in" appear>
    <main :key="$page.url" class="container p-4 mx-auto mt-[60px] relative">
        <slot />
    </main>
</transition>

Step 3: Define The Transition Style


The transition style is just a basic styling that will be applied for the transition when entering/leaving every page. Do note that you will be referencing to the style code below with the name="page" props.
<style>
    .page-enter-active,
    .page-leave-active {
        transition: all .1s;
    }

    .page-enter,
    .page-leave-active {
        opacity: 0;
    }
</style>

Full Code Example


The full code example is as follows.
<script setup>
    import Header from '@/Components/Header';
    import Footer from '@/Components/Footer';
</script>

<template>
    <Header/>

    <transition name="page" mode="out-in" appear>
        <main :key="$page.url" class="container p-4 mx-auto mt-[60px] relative">
            <slot />
        </main>
    </transition>

    <Footer/>
</template>

<style>
    .page-enter-active,
    .page-leave-active {
        transition: all .1s;
    }

    .page-enter,
    .page-leave-active {
        opacity: 0;
    }
</style>
I hope this short snippet helps and happy coding!

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Add Page Transition In Inertia JS

)