nuxt: bug(csr): error page layout not correctly applied

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

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

error1

but a page component has code error.

error2

when route to this page.

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


at nuxt@v1.0.0-rc11 not this problem.

<div align="right">This question is available on Nuxt.js community (#c2205)</div>

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 8
  • Comments: 29 (3 by maintainers)

Most upvoted comments

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

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

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

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>

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.

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?

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.

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>

#5654 🐛

Still have this issue

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