Nuxt.js: Transition between error layout doesn't work

[hackuun]

I have default and error layout, but when I hit to error page there's no transition. I read about layout transition but still have no solution for that issues. Can you please provide more clear example, because current example doesn't apply to my case.

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

[ram-you]

+1

[chasebank]

Here is an example of a basic layout transition:

live demo
code

Layout transitions have a default "layout" name, so you basically don't have to do anything except create the transition CSS.

.layout-enter-active, .layout-leave-active {
  position: absolute;
  transition: opacity .6s
}

.layout-enter, .layout-leave-to {
  opacity: 0;
}

That will fade the layouts in and out. If you want to set a custom transition name or change the default transition mode, you define the layout in nuxt.config

module.exports = {
  css: [
    '~/css/styles.css'
  ],
  loading: false,
  layoutTransition: {
    name: 'custom-name',
    mode: 'in-out'
  }
}

This is slightly different from page transitions, in that page transitions can either be defined globally in the config, OR in each page file, which allows you to have multiple transitions. Layout transitions are only defined once, in the config (as of this writing).

[hackuun]

@chasebank your example doesn't apply to this issue. I am talking about Error layout. I am not using this in Pages

layout: 'dark'

[hackuun]

Also, I am using .page-leave-active class, not layout

[chasebank]

You're correct, the error layout is different. I hadn't experimented with that yet.

I'm still wrapping my head around exactly how that functions and why, but as far as I can tell it's basically a layout that acts like a page. Kind of confusing and I think can be improved...

But, you still have some options.

Even though the error layout is acting like a page, it's still a layout and therefore uses the layout transition hooks. So you have to use .layout-leave-active etc., not the page ones.

Important to note: The error layout uses the default layout it'self, (by default...)

The layout transition hooks only fire when the layout changes. If your other pages are also using the default layout, the means the layout isn't change and the transition hooks aren't fired. If you don't use the default layout on any other pages, and instead use custom layouts on those, then the layout transition hooks will always fire as expected and problem solved.

Alternatively, you can use a custom error layout on the error layout, so that regardless of what layout the other pages use, the error layout uses a different one, and the transition hooks will fire. This is a bit meta, I know, but it's actually described in the Nuxt docs:

layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog' // you can set a custom layout for the error page
}
</script>

So, create a second error layout, for example layouts/errorlayout.vue for example, and use that in layouts/error.vue, where the above example shows 'blog'

I've updated the Glitch

[hackuun]

@chasebank thanks for insight, very interesting. Never looked such deep in this issue. Too tell the truth - two separate layouts for errors looks too much for me. I really hope there's simpler solution. Nevertheless, very enlighten

[dsmurl]

I actually get this behavior between all layouts. I have a default, admin, and error. The transitions only work when routing changes go to the same layout. All my route changes from one layout to another are ignored. where nuxt.config like:

transition: {
    name: 'fade',
    mode: 'out-in'
  }

and global css:

.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[dsmurl]

No fixy???

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