April 19, 2026 6:23 PM
1.
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('/') 로는 그 상태가 남아서 에러 페이지가 계속 보일 수 있다.
2.
pages/[...slug].vue — catch-all 라우트
error.vue 대신 페이지 레이아웃(헤더 등)을 그대로 유지하고 싶을 때 씁니다.
// pages/[...slug].vue
<script setup>
throw createError({ statusCode: 404, message: 'Not Found' })
</script>