Encountering a bug in Nuxt 2.4.x regarding transitions.
Here's an example from the template:
<transition
appear //---> this never work
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:leave="leave">
....
</transition>
Script section:
transition: {
mode: 'out-in',
css: false,
beforeEnter (el) {
console.log('before in transition object') // works
},
enter (el, done) {
console.log('enter in transition object') // works
},
afterEnter (el) {
console.log('after enter in transition object') // works
},
leave (el, done) {
console.log('leave in transition object') // works
done()
}
},
methods: {
// https://nuxtjs.org/api/pages-transition
// https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
beforeEnter (el) {
console.log('before in methods object') // never executed
},
enter (el, done) {
console.log('enter in methods object') // never executed
},
afterEnter (el) {
console.log('after enter in transition object') // never executed
},
leave (el, done) {
console.log('leave in methods object') // never executed
},
}
If you remove all the methods in the methods object, you get these errors:
commons.app.js:9837 [Vue warn]: Property or method "beforeEnter" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/about.vue> at pages/about.vue <Layouts/default.vue> at layouts/default.vue commons.app.js:9837 [Vue warn]: Property or method "enter" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Pages/about.vue> at pages/about.vue <Layouts/default.vue> at layouts/default.vue
and so on...
Any suggestions?