Страница ошибки и createError

Когда страница не найдена или сервер упал, Nuxt показывает страницу ошибки. По умолчанию это стандартная заглушка Nuxt; свою страницу ошибки описывают в файле app/error.vue. Вызвать такую ошибку из кода можно функцией createError.

Своя страница ошибки

Создайте файл app/error.vue (не в папке pages, а прямо в app/):

<!-- app/error.vue -->
<script setup lang="ts">
import type { NuxtError } from '#app'
 
defineProps<{ error: NuxtError }>()
</script>
 
<template>
  <main>
    <h1>Ошибка {{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
  </main>
</template>

Nuxt передаёт ошибку в свойство error: в statusCode лежит код, в message — текст. Откройте несуществующий адрес, например /contacts, — появится «Ошибка 404» и текст о том, что страница не найдена.

Возврат на сайт

Страница ошибки заменяет всё приложение, даже макет. Чтобы выйти из неё, вызывают clearError:

<!-- app/error.vue -->
<script setup lang="ts">
import type { NuxtError } from '#app'
 
defineProps<{ error: NuxtError }>()
 
function goHome() {
  clearError({ redirect: '/' })
}
</script>
 
<template>
  <main>
    <h1>Ошибка {{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="goHome">На главную</button>
  </main>
</template>

Кнопка сбросит ошибку и откроет главную страницу.

Ошибка 404 для статьи

Если статьи нет, API вернёт 404, но страница /posts/99 покажет пустое место. Превратите это в настоящую ошибку:

<!-- app/pages/posts/[id].vue -->
<script setup lang="ts">
const route = useRoute()
const { data: post } = await useFetch(() => `/api/posts/${route.params.id}`)
 
if (!post.value) {
  throw createError({
    statusCode: 404,
    message: 'Статья не найдена',
    fatal: true
  })
}
</script>

Теперь /posts/99 покажет страницу ошибки с текстом «Статья не найдена», а поисковики получат код ответа 404. Опция fatal: true нужна, чтобы страница ошибки показалась и при переходе по ссылке в браузере, а не только при первой загрузке с сервера.

Способы вызвать ошибку

Если ошибка должна затронуть только часть страницы, оберните эту часть в компонент <NuxtErrorBoundary>: при ошибке внутри него выведется запасное содержимое, а остальная страница продолжит работать.

Частая ошибка

Сделать на странице ошибки обычную ссылку <NuxtLink to="/">. Состояние ошибки при этом не сбрасывается, и пользователь может остаться на той же странице ошибки. Для выхода используйте clearError({ redirect: '/' }) — функция и сбрасывает ошибку, и выполняет переход.