Nuxt JavaScript hooks transition - a bug?

Question

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

Example in 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>

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...

Any ideas?

Taro Taro · Accepted Answer · 2019-05-22T01:13:02

According to the information you've provided there are a few things I would like you to notice.

If you refer to the nuxt documentation here you will notice that the transition property will control how the page component will behave when moving between pages. That is, everytime you move from one route to another.

The methods you're defining inside the component are the functions that your transition component will call when such transition takes place as stated in the vue docs here. That's why you're getting that error

Now, I think that your transition is not working because you haven't named it ye. It will give you more control on what your transition is doing. You also need to add some css to make the transition effective.

If you look at the chart above, you will find how pure css transitions go from one state to another.

I would also refer you to this amazing article by Sarah Drasner which talks about page transitions

Nuxt JavaScript hooks transition - a bug?

1 Answers