NUXT_FRONTEND/layouts/error.vue

<template>
  <section class="detail section">
    <div class="adaptive_flex basic_content">
      <div class="column">
        <h1 v-if="error.statusCode === 404" class="error404">
          <!-- Ошибка 404 -->
          Ошибка 404. А год - кролика
          <div>
            <img src="/png/monster.png" alt="Rabbit2023">

          </div>
        </h1>
        <h1 v-if="error.statusCode === 500">
          Ошибка 500. Внутренняя ошибка сервера
        </h1>
        <h1 v-if="error.statusCode === 502">Ошибка 502. Bad Gateway</h1>

        <NuxtLink to="/">Перейти на главную</NuxtLink>
      </div>
    </div>
  </section>
</template>


<script>
export default {
  props: ["error"],
  layout: "error", // you can set a custom layout for the error page

  computed: {
    text() {
      if (this.error.statusCode == 404)
        return "Ошибка 404. Страница не найдена";
      else if (this.error.statusCode == 500)
        return "Ошибка 500. Внутренняя ошибка сервера";
      else if (this.error.statusCode == 502)
        return "Ошибка 502. Bad Gateway";
    },
  },

  head() {
    return {
      title: this.text
    };
  },
};
</script>


<style lang="scss" scoped>
.error-text {
  margin-left: 40px;
  padding: 20px;
}
.error404{
  text-align: center;
  img{
    margin: 20px 0;
  }
}
</style>