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 :

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

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>