How to vuetify page transition?

The Vuetify transitions as you have them only work on the Vuetify library components. e.g. <v-menu transition="slide-x-transition"> where v-menu is one of the components. You can't use the transitions that way on a simple <div>.

However, Vue.js itself supports transitions using the following format.

<transition name="slide">
    <div> element you are apply the transition to</div>
</transition>

You will have to define the css for the transition as per the documentation here. or you can use a css library like Animate.css

Example css from documentation:

.slide-fade-enter-active {
   transition: all .3s ease;
}
.slide-fade-leave-active {
   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
   transform: translateX(10px);
   opacity: 0;
}

In case someone needs to know how to use VuetifyJS transitions with router-view which I understood by page transitions.

Vuetify router-view Transitions

Vue2 / Vuetify2

Here you can use the Vuetify transitions directly

<v-main>
  <v-container fill-height>
    <v-slide-x-transition mode="out-in">
      <router-view />
    </v-slide-x-transition>
  </v-container>
</v-main>

Vue3 / Vuetify3

In Vue3 / Vuetify3 this is unfortunately no longer directly usable due to the changes in the router-view API. But of course you can pick the values of the Vuetify transitions on Github and recreate them accordingly.

<template>
  <v-main>
    <v-container fill-height>
        <router-view v-slot="{ Component, route }">
          <transition name="slide-x" mode="out-in">
            <component :is="Component" :key="route.path" />
          </transition>
        </router-view>
    </v-container>
  </v-main>
</template>

<style>
    /* v-slide-x-transition look a like */
    .slide-x-enter-active,
    .slide-x-leave-active {
      transition: transform .6s cubic-bezier(0.25, 0.8, 0.5, 1), opacity .8s;
      opacity: 1;
    }

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

    .slide-x-enter-from {
      transform: translateX(100px);
    }

    .slide-x-leave-to {
      transform: translateX(-100px);
    }
</style>

You can use Vuejs transition For changing components instead of vuetify transitions look at the following example:

<transition name="slide-in-down" appear appear-active-class="animated slideInDown">
    <div> element you are apply the transition to</div>
</transition>