Nuxt.js: JavaScript hooks transition - a bug on pages?

[lautiamkok]

I think there is a bug in Nuxt 2.4.x in transition.

Example in about.vue 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>

In script:

      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://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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at pages/about.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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> at pages/about.vue

at layouts/default.vue

and so on...

Is it a bug or something else I am missing??

EDIT:

The entire code structure in my pages/about.vue:

<template>

  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:leave="leave">

  <!-- article -->
  <div class="row" v-if="post">

    ///

  </div>
  <!-- article -->

  </transition>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'slug',
  data () {
    return {
      post: null
    }
  },
  mounted () {
    //
  },
  transition: {
    mode: 'out-in',
    css: false,
    beforeEnter (el) {
      console.log('before in transition object')
    },
    enter (el, done) {
      console.log('enter in transition object')
      done()
    },
    afterEnter (el) {
      console.log('after enter in transition object')
    },
    leave (el, done) {
      console.log('leave in transition object')
      done()
    }
  },
  methods: {
    // https://nuxtjs.org/api/pages-transition
    // https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
    beforeEnter (el) {
      console.log('before in methods object')
    },
    enter (el, done) {
      console.log('enter in methods object')
    },
    afterEnter (el) {
      console.log('after enter in transition object')
    },
    leave (el, done) {
      console.log('leave in methods object')
    },
  }
}
</script>

_{This question is available on Nuxt community (#c8728)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt.js issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt.js/issues/c8728.

[aldarund]

Its not a bug. Methods should be in methods object. Its clearly stated in vue documentation with examples
https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

[cmty[bot]]

This question has been resolved by @aldarund, see answer.

[lautiamkok]

@aldarund it works only on Vue itself. Not in Nuxt. I have explained already in my sample code.

[manniL]

@lautiamkok please correctly file a bug report. That shouldn't be too hard

[aldarund]

@lautiamkok how it work in vue itself? You didnt explain it at all. In your example u are saying u are removing from methods and get error. Thats exactly how it work in vue

http://jsfiddle.net/a7u4ms9w/

methods should be in methods and u are removing them from it

[lautiamkok]

@aldarund did you read the comments I put next to the console.log?

    methods: {
        // https://nuxtjs.org/api/pages-transition
        // https://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
        },
      }

[lautiamkok]

@aldarund in http://jsfiddle.net/a7u4ms9w/ you actually put all the transition functions in transition object not in the method object.

transition:{
    beforeEnter(el) {
      this.status = "will enter";
    },
    enter(el, done) {
      this.status = "entering";
      setTimeout(()=>{
        done();
      }, 1000);
    },
    afterEnter(el) {
      this.status = "entered";
    },
    beforeLeave(el) {
      this.status = "will leave";
    },
    leave(el, done) {
      this.status = "leaving";
      setTimeout(()=>{
        done();
      }, 1000);
    },
    afterLeave(el) {
      this.status = "hidden";
    }
  }

[aldarund]

@lautiamkok i dont understand you. Thats what u are doing. In your first post you have it in transition and methods, and they u are saying i deleted from methods and im getting error. Which is what should happen and i demostrated it

[lautiamkok]

@aldarund have you tried to put those transition functions in the method object in a Nuxt.js app and do they work?

[aldarund]

@lautiamkok please https://github.com/nuxt/nuxt.js/issues/5111#issuecomment-467443800

[lautiamkok]

@aldarund will file a report later when i got time.