LearnApplyShare

[nuxt] 공통 에러 페이지 error.vue

September 04, 2019 - [Frontend]

nuxt 에서 처리되지 않은 예외는 모두 넉스트의 기본 에러페이지로 처리된다.


/layout/error.vue

넉스트의 기본 에러 출력화면을 커스터마이징 하려면 아래와 같이 /layout/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>

error prop

error.vue 에 전달되는 error prop은 Error 클래스의 인스턴스가 아닌 error 의 속성이 그대로 복사된 plain object 이기 때문에 error.stack 에 접근할 수 없고 error stack 정보를 출력할 수 도 없다


Ref.

https://nuxtjs.org/guide/views#error-page