api-client/layouts/error.vue

<template>
  <div class="page page-error">
    <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
    <h3 class="select-text">{{ message }}</h3>
    <p class="mt-4">
      <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
      <ButtonSecondary
        icon="refresh"
        :label="$t('reload')"
        outline
        @click.native="reloadApplication"
      />
    </p>
  </div>
</template>

<script>
import { initializeFirebase } from "~/helpers/fb"

export default {
  props: {
    error: {
      type: Object,
      default: null,
    },
  },

  computed: {
    statusCode() {
      return (this.error && this.error.statusCode) || 500
    },
    message() {
      return this.error.message || this.$t("error.something_went_wrong")
    },
  },

  beforeMount() {
    initializeFirebase()
  },

  methods: {
    reloadApplication() {
      window.location.reload()
    },
  },
}
</script>

<style scoped lang="scss">
.page-error {
  @apply flex flex-col;
  @apply items-center;
  @apply justify-center;
  @apply text-center;
}

.error_banner {
  @apply w-24;
  @apply mb-12;
}
</style>