Создание страницы 404 в Nuxt

Введение

Каждый современный сайт должен заботиться об удобстве пользователя, даже если тот попал на несуществующую страницу. Для этого создают специальную страницу с кодом ошибки 404 — «страница не найдена». В фреймворке Nuxt (как 2-й, так и 3-й версии) реализация и настройка такой страницы играют важную роль не только для UX, но и для SEO.

В этой статье я подробно расскажу вам, как реализовать свою страницу 404 в Nuxt, как она работает под капотом, чем отличается работа с ошибками в Nuxt 2 и Nuxt 3 и как можно улучшить поведение страницы по своему усмотрению. Смотрите, я покажу разные подходы и нюансы, чтобы у вас остались только рабочие решения.

Как обрабатываются 404 ошибки в Nuxt

Перед тем как перейти к практике, давайте разберемся, каким образом обработка ошибок устроена во фреймворке.

• Nuxt 2: поддерживает централизованную обработку ошибок через специальный error layout. При генерации или серверной отдаче Nuxt сам обрабатывает маршруты, которые не совпадают с существующими страницами.
• Nuxt 3: появилась более гибкая система управления ошибками, в том числе naitive-обработка ошибок в middleware, асинхронных методах и роутах, а также свой особый error boundary.

В каждом из случаев реализовать красивую и информативную 404 страницу — не только вопрос эстетики, но и часть правильной архитектуры Nuxt-приложения.

Реализация 404 страницы в Nuxt 2

Давайте разберём классическую ситуацию — сайт на Nuxt 2, требуется своя - кастомная страница 404.

Структура проекта и специальный файл error.vue

Все страницы в Nuxt хранятся в папке pages. По умолчанию, если какой-то маршрут не найден, Nuxt рендерит специальную страницу ошибок. Для этого в корне папки layouts нужно разместить файл error.vue.

Смотрите на структуру:

project-root/
├── layouts/
│   └── error.vue   // Наша кастомная ошибка: и 404, и другие
├── pages/
│   └── ...

Пример error.vue для страницы 404

Вот самый простой пример такого файла:

<template>
  <div class="error-container">
    <h1>{{ error.statusCode }}</h1>
    <p v-if="error.statusCode === 404">
      Упс, страница не найдена!
    </p>
    <p v-else>
      Произошла ошибка: {{ error.message }}
    </p>
    <!-- Вы можете добавить картинку, ссылки, кнопки и т.д. -->
    <nuxt-link to="/">На главную</nuxt-link>
  </div>
</template>

<script>
export default {
  props: ['error'] // Проп принимает объект error от Nuxt
}
</script>

<style>
.error-container {
  text-align: center;
  margin-top: 60px;
}
</style>

• В пропсах компонент принимает объект error, который содержит поля statusCode и message.
• Вы видите ветвление: если код 404 — показывается текст для 404, иначе — стандартное сообщение об ошибке.

Можно ли сделать error.vue только для 404?

В Nuxt 2 файл error.vue служит для всех ошибок сразу (и 404, и 500, и любые другие). Поэтому внутри шаблона всегда уточняйте вид ошибки по statusCode. Если вам нужна прям отдельная страница только для 404, например с совершенно другим дизайном, то логика будет чуть сложнее — я покажу пример ниже.

Кастомизация error.vue для разных ошибок

Иногда хочется показать разный дизайн или контент под разные коды ошибок. Например, особую анимацию для 404, отдельное сообщение для 401.

Вот как можно это реализовать:

<template>
  <div>
    <component :is="viewComponent" :error="error" />
  </div>
</template>

<script>
import Error404 from '~/components/Error404.vue'
import Error500 from '~/components/Error500.vue'
import ErrorDefault from '~/components/ErrorDefault.vue'

export default {
  props: ['error'],
  computed: {
    viewComponent() {
      if(this.error.statusCode === 404) return Error404
      if(this.error.statusCode === 500) return Error500
      return ErrorDefault
    }
  }
}
</script>

• Теперь вы определяете свои компоненты для разных кодов и выбираете какой рендерить.

Как вызвать ошибку 404 вручную

Бывают случаи, когда в асинхронных методах вам нужно из кода вызвать 404. Например, страница профиля пользователя, которого не существует.

async asyncData({ error, params }) {
  // Предположим: функция findUser возвращает null если не найдено
  const user = await findUser(params.id)
  if (!user) {
    // Сообщаем Nuxt о 404 ошибке, ее обрабатывает error.vue
    error({ statusCode: 404, message: 'Пользователь не найден' })
  }
  return { user }
}

Реализация 404 страницы в Nuxt 3

В Nuxt 3 подход стал более гибким и современным. Здесь мы работаем с error boundary и можно не только управлять глобальной страницей ошибок, но и делать композицию на уровне страниц, компонентов или middleware.

Создание страницы 404 средствами Nuxt 3

Файл app/error.vue

В корне проекта вы можете добавить app/error.vue. Это и есть главный boundary для ваших ошибок. Nuxt использует его для отрисовки глобальных ошибок, включая 404.

• Путь: app/error.vue

Пример файла app/error.vue

<script setup>
// Получаем информацию об ошибке через useError()
const error = useError()
</script>

<template>
  <div class="error-container">
    <h1 v-if="error.statusCode === 404">404 — Страница не найдена</h1>
    <h1 v-else>Произошла ошибка ({{ error.statusCode }})</h1>
    <p v-if="error.message">{{ error.message }}</p>
    <NuxtLink to="/">Вернуться на главную</NuxtLink>
  </div>
</template>

<style scoped>
.error-container {
  text-align: center;
  padding: 48px;
}
</style>

Здесь вы используете composable useError() (Nuxt 3 предоставляет его из коробки) — она возвращает объект error.

Страница 404 — это важный элемент любого веб-сайта. Она позволяет пользователям, которые перешли по недействительной ссылке, понять, что произошло, и вернуться к навигации по сайту. Правильно настроенная страница 404 улучшает пользовательский опыт и предотвращает потерю посетителей. Если вы хотите детальнее погрузиться в мир Nuxt, освоить все его тонкости и стать настоящим профессионалом — приходите на наш большой курс Nuxt - fullstack Vue фреймворк. На курсе 129 уроков и 13 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Вызов страницы 404 из кода

Когда в вашей логике данных что-то не находится, вот как вызвать ошибку 404:

<script setup>
import { useRoute, showError } from '#imports'

const route = useRoute()
const user = ref(null)

onMounted(async () => {
  user.value = await fetchUser(route.params.id)
  if (!user.value) {
    // showError выбрасывает ошибку, которую поймает error boundary
    showError({ statusCode: 404, message: 'User not found' })
  }
})
</script>

• showError выбрасывает ошибку — Nuxt ловит ее и показывает app/error.vue.

Локальная обработка ошибок (Error Boundary)

В Nuxt 3 error boundary можно задавать на уровне компонентов с помощью defineNuxtComponent({ errorCaptured(error) { ... } }) или использовать хук errorCaptured для компонентов Vue, чтобы кастомизировать обработку внутри.

Вывод кастомной страницы только для 404

Как реализовать дизайн отдельной 404 страницы, не смешивая ее с другими ошибками?

• В app/error.vue делайте рендеринг под условием статуса ошибки.
• Если дизайн сильно отличается, можно подключать отдельные компоненты:

<template>
  <div>
    <Error404 v-if="error.statusCode === 404" />
    <ErrorGeneral v-else :error="error" />
  </div>
</template>

<script setup>
import { useError } from '#imports'
import Error404 from '~/components/Error404.vue'
import ErrorGeneral from '~/components/ErrorGeneral.vue'

const error = useError()
</script>

Теперь для 404 показывайте всё, что нужно для улучшения UX: иллюстрации, поиск, кнопки возврата.

Улучшения и рекомендации для страницы 404

Логирование и метрики

Рекомендуется логировать такие ошибки на серверной стороне, чтобы выявлять часто возникающие проблемы или неожиданные обращения к несуществующим страницам. Смотрите, как можно, например, отправлять info о 404 в сторонний сервис:

if (error.statusCode === 404) {
  sendToAnalytics('404', error.message)
}

SEO и пользовательский опыт

Добавляйте мета-теги и title прямо в 404 страницу (в error.vue или через composable):

<template>
  <head>
    <title>Страница не найдена — MySite</title>
    <meta name="robots" content="noindex, nofollow" />
  </head>
  <!-- ...контент страницы 404... -->
</template>

• Такой подход исключит вашу 404 страницу из поисковой выдачи и избавит от индексации её роботом.

Стилизация и брендинг

Добавьте на 404 фирменный стиль, иллюстрации, мини-игру или поле поиска по сайту — всё, что лучше удержит пользователя и не даст ему уйти с портала.

Дополнительные техники и best practices

Встраивание поиска по сайту и релевантного контента

Дайте пользователю варианты: переход на главную, поиск, навигация по популярным страницам. Обычно это увеличивает вероятность, что пользователь не уйдет с сайта.

<template>
  <div>
    <h1>404 — похоже, такой страницы нет</h1>
    <input placeholder="Начните поиск по сайту..." />
    <ul>Популярные страницы:
      <li><NuxtLink to="/">Главная</NuxtLink></li>
      <li><NuxtLink to="/about">О нас</NuxtLink></li>
    </ul>
  </div>
</template>

Разделение страницы 404 для разных поддоменов или локализаций

В многоязычных или мультисайтовых проектах страницу 404 делают с учетом языка интерфейса или домена. Логика подгрузки нужной локализованной версии часто строится на основе i18n или Nuxt middleware.

Тестирование и dev-окружение

Проверьте, что ваша страница 404 работает и в режиме разработки, и после сборки (например, при статической генерации). Иногда на статических Nuxt сайтах 404 работает иначе — особенно на статическом хостинге, типа Netlify или Vercel. Там нужно дополнительно настраивать fallback страницы.

Примеры расширенного использования и полезные трюки

Перенаправление с 404 на главную или другую страницу

Иногда, вместо показа страницы 404, требуется редиректить пользователя (например, после миграции страниц):

// Nuxt 2, метод asyncData или middleware
if (!found) {
  redirect('/') // Перенаправляет на главную
}

• Используйте перенаправление только если это оправдано с точки зрения UX и SEO.
• Важно: не маскируйте "настоящую" 404 навязчивым редиректом — поисковые роботы могут не понять ваши намерения.

Использование nuxt generate: статические 404

В случае со статическим сайтом:

• На Nuxt 2 и Nuxt 3 при генерации будет создан файл 404.html.
• Проверьте, что хостинг корректно отдаёт его как 404 (на GitHub Pages, Netlify или Vercel это делается автоматически).

Если нужно что-то особенное:

• В Nuxt 2 используйте опцию generate.fallback в nuxt.config:

export default {
  generate: {
    fallback: true // или '404.html'
  }
}

Заключение

Создание качественной страницы 404 в Nuxt — это не только вопрос эстетики и функциональности, но и грамотной архитектуры. В Nuxt 2 и 3 для этого предоставлены гибкие инструменты: от универсального error layout до error boundary и composables. Вы можете кастомизировать 404 как душе угодно, выводить разный контент, логировать ошибки и даже улучшать SEO, исключая эти страницы из индексации. Важно помнить, что хорошо реализованная страница 404 удерживает пользователя на сайте и может превратить случайную ошибку в точку роста вашего проекта.

Создание страницы 404 — это лишь один из элементов создания полноценного веб-сайта на Nuxt. Чтобы создавать профессиональные и удобные веб-приложения, необходимо освоить множество других навыков, таких как работа с роутингом, компонентами, данными и стилизацией. На курсе Nuxt - fullstack Vue фреймворк вы получите комплексные знания и практический опыт, необходимые для успешной разработки веб-приложений на Nuxt. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир Nuxt прямо сегодня.

Часто задаваемые технические вопросы

Как сделать отдельную страницу 404 для разных языков в Nuxt?

Добавьте поддержку i18n (например, через пакет nuxt-i18n) и используйте локализацию в error.vue (или app/error.vue). Для этого подставляйте тексты с помощью $t('error.404') и заводите переводы для нужных языков.

Как обработать 404 в статически сгенерированных Nuxt проектах (generate)?

Проверьте что опция generate.fallback активирована: в nuxt.config.js пропишите generate: { fallback: true }. Также убедитесь, что на уровне хостинга поддерживается отдача 404.html при ошибке (например, Netlify делает это автоматически).

Почему дизайн моей 404 страницы не применяется — показывается дефолтная страница?

Проверьте название и расположение файлов: в Nuxt 2 это всегда layouts/error.vue, в Nuxt 3 — app/error.vue. Также убедитесь, что ошибка действительно имеет код 404 и шаблон корректно это обрабатывает по statusCode.

Моя страница 404 не работает правильно после деплоя на Vercel/Netlify. Почему?

Для статики (generate) убедитесь, что сгенерирован именно 404.html и он загружается как fallback. На некоторых хостингах нужны свои настройки маршрутизации (rewrites/redirects). Посмотрите документацию вашего хостинга и настройте отдачу статических ошибок.

Как добавить кастомный layout только для страниц 404 в Nuxt 2?

К сожалению, в Nuxt 2 layout error.vue — всегда общий для всех ошибок. Можно в этом layout’e использовать условие по статусу и подключать разные компоненты (например, через :is или v-if / v-else). Полностью отдельный layout для 404 сделать нельзя, только отдельный рендер внутри error.vue.