Nuxt.js: Routes transitions javascript hooks

[PatrikLythell]

Any way to add the javascript hooks to the <transition>?

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

Maybe we could simply add transition: { hooks: true } as a viable option in nuxt-config? And then add the same as above into <transition> (seems overkill to be able to name the hooks yourself).

Thing to watch out for though:

It’s also a good idea to explicitly add v-bind:css="false" for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.

_{This feature request is available on Nuxt.js community (#c27)}

[Atinux]

Hi @PatrikLythell thanks for creating this issue, I thought about implementing it, it's now in the Roadmap for the 1.0.

I will try to find a nice way to implement it.

[Atinux]

@PatrikLythell

It is now in the 0.9.0, the documentation is not updated yet but you can add the hooks like this:

nuxt.config.js:

module.exports = {
  transition: {
    beforeEnter: function () {
       // beforeEnter hook
    }
  }
}

It works also in the page components and the children components 👍
To disable CSS, juste like the documentation of Vue.js says, you can put css: false to disable CSS transitions.

You can see the list of keys & hooks here: https://vuejs.org/v2/api/#transition

appearClass, appearActiveClass, beforeAppear, appear and afterAppear are removed from the list because of the SSR feature of Nuxt.js.

[vadimsg]

@Atinux with 0.9.5 can't manage to trigger the hook from nuxt.config.js, is this known bug?

[Atinux]

Hi @vadimsg

It will be possible in the next release.

In the meantime, you can add the hooks in your layouts/default.vue.

[vadimsg]

@Atinux FYI:

transition: { beforeEnter () { // beforeEnter hook } }
This makes build fail "Module build failed: SyntaxError: Unexpected token, expected , (42:55)"

transition: { beforeEnter: function () { console.log('beforeEnter'); } }
And this works. Need to upgrade global webpack v? Or it's nuxt bug?

[Atinux]

@vadimsg it's a known issue of serialize-javascript that we use for shorthand method definition: https://github.com/yahoo/serialize-javascript/issues/24

For the hooks definitions in nuxt.config.js, you have to use the ES2015 syntax:

...
transition: {
  beforeEnter: function () {
     console.log('beforeEnter');
  }
}
...

[brianbier]

@Atinux How should transitions within the same route be handled?

Example. /post-1 coming from another route will transitiion
However if there are related posts within post-1 if I click on another post inside that page post-2 will not transition because technically is within the same page

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.