Nuxt.js: Layout transitions (layoutTransition) javascript hooks

[crutch12]

What problem does this feature solve?

When I change route page and new page has another layout, I need vue transition hooks, to detect and handle it (in my case - I update store state in beforeLeave/afterEnter hooks)
Vue transition hooks: https://vuejs.org/v2/api/#transition

I tried write transition/layoutTransition inside layouts, but it doesn't work.
UPD: tried in nuxt.config - same result

layoutTransition: {
  beforeEnter: function () {
    debugger
  }
}

Nuxt version: 2.8.1

What does the proposed changes look like?

Same what you did here: https://github.com/nuxt/nuxt.js/issues/34
But for layouts

_{This feature request is available on Nuxt community (#c9453)}

[crutch12]

Anybody? :D

[galvez]

@crutch12 I'll take a look soon.

[crutch12]

Still waiting, thx

[RDMStreet]

+, it's very important for me too

[sguillema]

+1 Would be much appreciated

[NickBolles]

More specifically, looks like transition is serialized to the template here:
https://github.com/nuxt/nuxt.js/blob/0cb2df73a026f4a26fb32cbda33377e8debf4a2f/packages/vue-app/template/index.js#L61

But layout transition is done differently here:
https://github.com/nuxt/nuxt.js/blob/0cb2df73a026f4a26fb32cbda33377e8debf4a2f/packages/vue-app/template/App.js#L58

[crutch12]

Anybody? :D [2]
A year has passed

[SasanFarrokh]

I tried to use function (like pageTransition) in layoutTransition and it didn't work.

[ivodolenc]

As stated in the official documentation, this works as expected.

// nuxt.config.js
{
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('This works...');
    }
  }
}

But if you try that for a layout, it won't work.

// nuxt.config.js
{
   layoutTransition: {
    name: 'layout',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('This doesnt work...');
    }
}

Layout transition only work with css, at the moment.

// nuxt.config.js
{
   layoutTransition: {
    name: 'layout',
    mode: 'out-in'
  }
}

/* global css */

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}

Nuxt version: 2.14.5

[marcoribeiroweb]

Any updates on this? In my case i want the page transition hooks in layouts. Because i want the same transition (and other things) when i navigate from the error layout to default layout. Thanks. 🙏

[rutgerbakker95]

I need this too, same case as @marcoribeiroweb
Any updates yet?

[ivodolenc]

@galvez We would appreciate if you could give us some feedback, can we expect a fix soon? 😃