[Vuejs]-BarbaJS-like Page Transitions In Vue/NuxtJS

If you are implementing your VueJS project as a Single Page Application or SPA.
You would probably use vue-router.

Vue-router has explained in their documentation how to add a transition when you navigate from one page to another. It is as simple as wrapping the <router-view> component with <transition> just like the example below:

<transition>
    <router-view></router-view>
</transition>

For Future Googler. Just add these in default .vue in layout.

<style>


.page-enter-active {
  transition: all 0.25s ease-out;
}

.page-leave-active {
  transition: all 0.5s ease-in;
}

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

That’s all. Keep experimenting with it to get the desired effect.

There is a great article here by Sarah Drasner that explains how you can do it either with simple CSS transitions or with more complex transitions using libraries like GSAP.