BarbaJS-like Page Transitions In Vue/NuxtJS - vue.js

Question

After doing quite a bit of research on the topic, I am attempting to figure out how to achieve BarbaJS-like page transitions with Vue/Nuxt.
My goal is to have the URL change upon the dynamic transition of, for example, a portfolio project. So, sort of like an expanding grid layout that also changes the URL when clicked. Examples of what I am trying to achieve are at the following two websites:
https://strakzat.com/
https://infinum.co
The first website actually uses BarbaJS, but the second just uses pushState to achieve the desired effect. When you click on the examples of their work, the project element does an expanding effect into a new page, along with the URL change.
I do know that this is much simpler to achieve using Vue/Nuxt but I cannot seem to figure out how I would go about it within the test project I am working on. In Nuxt, my assumption would be to use a combination of page transitions along with middleware, which would "catch" the data while undergoing the transition and then
the router would take care of the URL change. But then again, maybe it is even much simpler than this.
Any ideas or help would be appreciated.

Answer 1

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>

Answer 2

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.

Answer 3

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.