Vue Page Transition, Inertia.js

AboutUs.vue

<template>
  <h1>About Us Component</h1>
  <h3>{{ url }}</h3>

  <p>Test fade/in out on page transition</p>

</template>

<script>

import Layout from './Layout'

export default {
  layout: Layout,
  props: {
    url: {
      default: '',
      type: String
    },
    page: {
      default: {},
      type: Object
    }
  }
}
</script>

Layout.vue

<template>
  <h4>Layout Template</h4>

  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about-us">About Us</a></li>
  </ul>

  <ul>
    <li><inertia-link href="/">Home</inertia-link></li>
    <li><inertia-link href="/about-us">About Us</inertia-link></li>
  </ul>

  <transition name="page" mode="out-in">
    <div v-if="animate">
      <slot />
    </div>
  </transition>
</template>


<script>
export default {
  data(){
    return{
      animate: false,
    };
  },
  mounted(){
    console.log('mounted layout')
      this.animate = true
  },
};
</script>

Page.vue

<template>
  <h1>Page Component</h1>
  <h3>{{ url }}</h3>
</template>

<script>

import Layout from './Layout'

export default {
  layout: Layout,
  props: {
    url: {
      default: '',
      type: String
    },
    page: {
      default: {},
      type: Object
    }
  }
}
</script>

transition.scss

.page-enter-active,
.page-leave-active {
  transition: all 5s;
}

.page-enter-from,
.page-leave-to {
  opacity: 0;
}