There are 3 steps that you can do to add page transitions in Inertia JS, let's get started
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".
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!
Leave a reply