Nuxt.js: Layout based transitions

Created on 8 Jul 2017 · 9Comments · Source: nuxt/nuxt.js

Hi, is there any chance we can get access to the page layout parameter inside the from and to object? (For transition control)

_{This question is available on Nuxt.js community (#c915)}

question

Source

samburgers

Most helpful comment

@Atinux , i was just thinking about this some more, and would it be possible to just add a transition property directly to the layout component?
layouts/blog.vue

export default {
  transition: {
    name: 'layout-blog',
    mode: 'out-in'
  }
}

samburgers on 10 Jul 2017

👍2 ❤1

All 9 comments

You should be able with to.matched[0].components.default.options.layout @samburgers

Example: https://glitch.com/edit/#!/unequaled-goldfish?path=pages/index.vue:11:39

Atinux on 8 Jul 2017

🎉1

@Atinux , i was just thinking about this some more, and would it be possible to just add a transition property directly to the layout component?
layouts/blog.vue

export default {
  transition: {
    name: 'layout-blog',
    mode: 'out-in'
  }
}

samburgers on 10 Jul 2017

👍2 ❤1

So it would be like the default transition for pages using this layout? @samburgers

Atinux on 11 Jul 2017

I was thinking that would be a good idea, but perhaps it does make more sense to just keep them in the /pages templates, as the layout templates are also defined there. Thanks for all the awesome work on this project BTW!

samburgers on 13 Jul 2017

❤1

Thanks @samburgers :)

Atinux on 18 Jul 2017

Transition between layouts would be a good idea. Currently not working, or I don't know how to set it up

PrimozRome on 7 Sep 2017

👍1

I think I was looking for something like a layout-based transition – is there a way to have _all_ pages use the same transition without adding a transition key to each page's .vue file?