marc-leopold/layouts/error.vue

<template>
  <div class="error-page">
    <h1 class="heading" v-if="error.statusCode === 404">Page not found</h1>
    <h1 class="heading" v-else>An error occurred</h1>
    <nav>
      <ul class="site-nav">
        <li class="site-nav__item"
            v-for="item in siteNav"
            :key="item.to"
            @click="$emit('closeMenu')"
        >
          <nuxt-link :to="item.to" >
            {{ item.text }}
          </nuxt-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: function () {
        return {}
      },
    }
  },

  computed: {
    siteNav () {
      return this.$store.getters['navigation/siteNav']
    },
  },
}
</script>

<style lang="scss" scoped>
.error-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  padding: calc(1rem + #{$site-menu__header-height}) 1rem;
  text-align: center;

  @media (min-width: $bp__layout) {
    padding: 6rem 1rem;
  }
}

.heading {
  margin-bottom: 1em;
  font-size: 2rem;
  color: $color__accent-danger-700;
}

.site-nav {
  font-size: 1.3rem;
  padding: 0;
}

  .site-nav__item {
    margin-bottom: .2em;
  }
</style>