Nuxt.js: bug(csr): error page layout not correctly applied

[ac88]

//layouts\error.vue
{
layout: 'empty'
}

route to a 404 page.the error page layout is right

but a page component has code error.

when route to this page.

the error page layout is layouts\default.vue not layouts\error.vue

at [email protected] not this problem.

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

[unr]

I'm having this same issue since upgrading to 1.0

--

As a temporary fix, I've created an empty layout...

// in layouts/error.vue
layout: 'empty',

and in layouts/empty.vue

<template><nuxt /></template>

<script>
export default { name: 'EmptyLayout' };
</script>

[joealden]

I am having the same issue.

I have two layouts in my layout directory, default.vue and error.vue.
The default layout is named default-layout and the error layout is named nuxt-error

When an error occurs, nuxt is rendering the error layout inside of the default layout as seen here:

[cesasol]

Is an undocumented change, the error layout is no longer a layout and it works like a page

[joealden]

@cesasol Oh really? Could you point me to the PR that was merged of this change please?

If you are right, it would have been nice to have that in the release notes, as I would consider it a breaking change!

[cesasol]

I don't know, I upgraded, noted this and updated my code accordingly, yes it should be on the release notes but maybe not as a breaking change.

[rancongjie]

@pi0

[joealden]

@cesasol I did the same, and it all works fine, but it's not the best way to experience a change. I've had a quick look through merged PRs and none stood out to me that were linked to this, which still makes me doubt whether this is an intentional change or a regression.

Also, I would myself consider this breaking, as it broke my error page.

If someone can give me evidence that this is an intentional change, I'll be more than happy to make a PR updating the docs with this.

[husayt]

This seems to be resolved now. Closing. Reopen if still happens.

[ac88]

@husayt it sitll happens at nuxt 1.4.0

[Kimel1]

Still have this issue

[moltar]

Get the same error.

If refreshing the URL with 404, the correct layout is applied.

If visiting the URL via a broken link within the same state, then the layout remains from the previous page (e.g. with nav and all).

[sinsong]

I think we need a function that don't use any layout.

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

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[luisfavila]

If refreshing the URL with 404, the correct layout is applied.
If visiting the URL via a broken link within the same state, then the layout remains from the previous page (e.g. with nav and all).

I'm using nuxt-edge 2.4.0 and this still happens.
@moltar have you found any solution?

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[saeed-darestany]

#5654 :bug:

[saeed-darestany]

@Atinux @pi0
any news on this ?

[Leskd]

any news on this ?

[louisluu]

Encountered this issue in Nuxt 2.8.1

Any update?

[JulienAramino]

Same on 2.9.2
The page 200.html is not generate properly

[KleinMaximus]

Same on 2.9.2

[manniL]

@clarkdo I've reassigned you here and closed #5654 as duplicate.

[vincent-kean]

Still having the problem.. any update guys?

[rmirabelle]

Still have this problem. SPA mode. When calling $nuxt.error, the error.vue page is rendered inside the default.vue layout, ignoring the empty layout specified in the error.vue page itself.

pages/test.vue

export default {
    name: 'test',
    async fetch() {
        try {
            //get some bad URL
        } catch(e) {
            this.$nuxt.error('This will render the error as a route within default.vue, ignoring the error page layout')
        }
    }
}

layouts/error.vue

export default {
        layout: 'empty', //ignored
        props: {
            error: {
                type: Object,
                default: null
            }
        }
    }

layouts/empty.vue

<template>
    <nuxt/>
</template>

[TimoTheus27]

Still have this problem. SPA mode. When calling $nuxt.error, the error.vue page is rendered inside the default.vue layout, ignoring the empty layout specified in the error.vue page itself.

pages/test.vue

export default {
  name: 'test',
  async fetch() {
      try {
          //get some bad URL
      } catch(e) {
          this.$nuxt.error('This will render the error as a route within default.vue, ignoring the error page layout')
      }
  }
}

layouts/error.vue

export default {
      layout: 'empty', //ignored
      props: {
          error: {
              type: Object,
              default: null
          }
      }
  }

layouts/empty.vue

<template>
  <nuxt/>
</template>

having exactly the same problem. if error is thrown the default layout applies and layout: 'empty' is ignored