error.vue

<template>
  <v-app dark>
    <v-container align-center d-flex fill-height justify-space-around>
      <v-row class="justify-center">
        <h1 class="text-h1 justify-start text-center">
          {{ errorMsg }}
        </h1>
      </v-row>
      <NuxtLink id="home-page" to="/" class="text-uppercase">
        Home page
      </NuxtLink>
    </v-container>
  </v-app>
</template>

<script>
export default {
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      errorMsg: `${
        this.error.statusCode === 404 ? "404 Not Found" : "An error occured"
      }`,
      pageNotFound: "404 Not Found",
      otherError: "An error occurred",
    };
  },
  head() {
    const title = this.errorMsg;
    return {
      title,
    };
  },
};
</script>

<style scoped>
#home-page {
  font-size: x-large;
  text-decoration: none;
  color: var(--v-info-base);
}
h1 {
  font-size: 20px;
}
</style>