doccano/frontend/layouts/error.vue

<template>
  <v-app dark>
    <v-container fill-height style="height: calc(100vh - 58px)">
      <v-layout align-center>
        <v-flex text-center>
          <h1 class="display-2 primary--text">Whoops, 404</h1>
          <p>The page you were looking for does not exist</p>
          <v-btn to="/" outlined color="primary"> Get me out of here! </v-btn>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
export default {
  layout: 'empty',
  props: {
    error: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      pageNotFound: '404 Not Found',
      otherError: "The page you were looking for wasn't allowed to access."
    }
  },
  head() {
    const title = this.error.statusCode === 404 ? this.pageNotFound : this.otherError
    return {
      title
    }
  }
}
</script>