Vue/Nuxt page transition leave not working - vue.js

Question

so I tried to do page transitions on css but the leave transition didn't work, so I tried to do it with JS Hooks, but leave animations still doesn't work. I tried commenting on every step and I discovered that leave is not even getting called.
Script:
methods: {
beforeEnter: function (el) {
console.log("Before Enter")
// ...
},
enter: function (el, done) {
console.log("Entered")
// ...
},
leave: function (el, done) {
console.log("Leave")
// ...
}
}
Template:
<div id="app">
<nav-bar />
<transition
mode="out-in"
#before-enter="beforeEnter"
#enter="enter"
#leave="leave"
>
<nuxt />
</transition>
</div>
I have read the documentation for the transitions and I have even copied their code and pasted it as it is but still seems to be of no difference. I used yarn create nuxt-app so you would assume I'm on the most stable update
nuxt: 2.15.8
node: 14.18.1
ubuntu: 18.04.6 LTS

Answer 1

The documentation that you've linked is related to Vue3, and the API is a bit different there in comparison of Nuxt2 (using Vue2).
Here is the one you should look at.
This being by far the easiest to manage transitions
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
.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
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}