[Nuxt Admin] 5. Nuxt에서 Error페이지 커스텀마이징

in Devlog on Nuxt



[ Nuxt Admin Template 5 ] Nuxt에서 URL를 잘 못 접근하거나, 접근권한 등 추후에 설정가능하게 에러페이지 작업


11. Nuxt에서 Error페이지 커스텀마이징

Nuxt는 Vue로 개발이 용이하게끔 만들어진 프레임워크이기에 알아보는게 일이지.. 알면 쉽다.

간단하다.

Nuxt는 다시 말하자면 Layout안에 Page개념으로 그안으로 컴포넌트들로 구성하기 때문에 특정 Page에 특정 Layout를 설정 할 수 있다. 그렇게 구조가 되어있고 그렇게 쓰이게 만들어졌다.

우선 에러 페이지가 없을 경우는 기본 Nuxt 에러페이지를 띄운다. 하지만 커스텀 에러페이지를 사용하고자 할때는 Layouts 밑에 error.vue를 생성하면 된다. 그리고 에러페이지에 맞는 레이아웃을 설정하면 된다.

다른 특정 페이지에서도 layout: 'errorLayout'처럼 이와같이 사용하면 된다.


layouts/error.vue

<template>
  <div id="errorWrapper">
    <h1 v-if="error.statusCode === 404">Page not found { {error.statusCode} }</h1>
    <h1 v-else>An error occurred { {error.statusCode} }</h1>
    <nuxt-link to="/">사이트로 돌아가기</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'errorLayout'
}
</script>

<style>
  #errorWrapper {
    font-size: 18px;
    text-align: center;
  }
</style>


layouts/errorLayout.vue

<template>
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <nuxt />
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>


자~! 이제















끝났다.

페이지가 없는 URL로 접속하면 확인이 가능하다.