Nuxt4에서 라우터 에러 처리 방법들

현우

Apr 19, 20263d ago

Created by

현우

Created at

Apr 19, 2026 6:23 PM

카테고리

Empty

error.vue — 루트에 배치 (pages 뎁스와 같은 위치)

app/
  pages/
  layouts/
  error.vue ← app/ 밖, 프로젝트 루트 바로 아래

Nuxt가 자동으로 감지하며 404, 500 등 모든 에러를 받습니다.

<!-- error.vue -->
<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.statusCode === 404 ? '페이지를 찾을 수 없습니다.' : '서버 오류가 발생했습니다.' }}</p>
    <button @click="clearError({ redirect: '/' })">홈으로</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ error: { statusCode: number; message: string } }>()
</script>

clearError

Nuxt가 제공하는 에러 상태를 초기화하는 composable

error.vue 가 렌더링되었다는 것은 Nuxt 내부적으로 에러 상태가 계속 잡혀있다는 것이고, 단순히 useRouter().push('/') 로는 그 상태가 남아서 에러 페이지가 계속 보일 수 있다.

pages/[...slug].vue — catch-all 라우트

error.vue 대신 페이지 레이아웃(헤더 등)을 그대로 유지하고 싶을 때 씁니다.

// pages/[...slug].vue
<script setup>
  throw createError({ statusCode: 404, message: 'Not Found' })
</script>