when using $nuxt.error from client side, error page will not respect layout

[minawalphonce]

Versions

• nuxt: v2.13.3
• node: v10.16.0

Reproduction

Additional Details

1. nuxt as SPA mode, so no server side code

2. f something went wrong I use $nuxt.error( ... ) to display the error. I use it if something fatal happens and user should not continue.(e.g. on refreshing the token user is no longer have access).

error page
/layouts/error.vue

<template>
    <div class="wrapper">
      <div class="content-wrapper">
        <section class="content">
          <component :is="errorPage" :error="error" />
        </section>
      </div>
    </div>
</template>
<script>
import error404 from '@/components/error/404.vue'
import error500 from '@/components/error/500.vue'

export default {
  layout: 'empty',
  name: 'Error',
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  computed: {
    statusCode() {
      return (this.error && this.error.statusCode) || 500
    },
    message() {
      return this.error.message || 'Error'
    },
    errorPage() {
      if (this.statusCode === 404) return error404
      // catch everything else
      return error500
    },
  }
}
</script>

empty layout
/layouts/empty.vue

<template>
  <Nuxt />
</template>

Steps to reproduce

1. in index.vue a button is clicked
2. on button click method call $nuxt.error

window.$nuxt.error({ statusCode: 500, message: 'error message here ' })

What is Expected?

error page should be displayed with empty layout

What is actually happening?

error page is displayed with default layout
or with the layout used by the current page.

[silvio-e]

As far as I understand it, it is expected behavior as the error component is a page component which, like other pages uses the default layout. You find in the docs:

Warning: Though this file is placed in the layouts folder, it should be treated as a page.

For having an extra error page layout you have to create a layout and assign it in your error page through the layout property just like in normal pages.

[minawalphonce]

as explained
I created a layout called empty.vue in the layout folder (code attached)
and I set the layout property to empty (code attached as well).
still uses default layout

it works fine when I refresh.

[silvio-e]

Sorry, my bad. Didn't read precise enough. Did you see these? #7727 #7567

[minawalphonce]

thanks @silvio-e it themes duplicated
however in #7727 there is a fix merged in 2.13.3 which I find it still exists

[silvio-e]

Yes, it seems that it still exists - I just experienced the same in a quick test.

[stale]

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.

[bpeab]

This issue still exists and can't seem to find a open issue about this.