Nuxt.js: Custom error page not working with Typescript

Created on 27 Aug 2019 · 13Comments · Source: nuxt/nuxt.js

Version

v2.9.1

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-mzpsr

Steps to reproduce

When using class API to create the error.vue file some properties do not work at all. E.g. you cannot set the layout property, or use the asyncData method.

Just open the codesandbox, and open a non existing url in the "browser". e.g. just append /asdf.
You see a error page with the text "custom error page". Now open layouts/error.vue,
comment out the

All 13 comments

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:

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

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

stale[bot] on 17 Sep 2019

It's still an issue in the latest version,just tried to debug it last weekend. Unfortunately some more background is needed to tackle this I guess ;)

simllll on 17 Sep 2019

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

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

stale[bot] on 8 Oct 2019

Ping, issue still exists

simllll on 8 Oct 2019

I solved it by moving your layout property from the decorator to the class itself. I dont think the @Component decorator allows non-vue properties.

See: https://codesandbox.io/s/codesandbox-nuxt-viupg

xxRockOnxx on 10 Oct 2019

👍3

@xxRockOnxx very very interesting.... thanks!!

Kronhyx on 11 Oct 2019

I was just re reading the Vue class component documentation, something I like to try is the custom hooks registration. Maybe this one solvea it too? https://github.com/vuejs/vue-class-component#adding-custom-hooks

But thanks for figuring this out and give the right hint!

simllll on 11 Oct 2019

One thing to point out here:
It does work with regular pages like expected, only the error/ (within layout folder) page behaves differently, still think this is kind of a bug.

simllll on 11 Oct 2019

This bug are still present in 2.10 version with TS 3.7. @xxRockOnxx trick does work with error page. If it's not the error page (layout), then using layout: 'name' in a component decorator does work.