Routes transitions javascript hooks

[nuxt]

Routes transitions javascript hooks

[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]

@vadimsg it's a known issue of serialize-javascript that we use for shorthand method definition: yahoo/serialize-javascript#24

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

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

[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?

[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]

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.