2020-07-06 16:08:32 +02:00

51 lines
1.1 KiB
Vue

<template>
<div
class="h-screen container mx-auto h-full flex justify-center items-center"
>
<div
class="text-gray-200 w-full md:w-1/2 lg:w-1/3 bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
>
<h1 v-if="error.statusCode === 404">
{{ pageNotFound }}
</h1>
<h1 v-else>
{{ otherError }}
</h1>
<NuxtLink to="/" class="text-blue-200 underline">
Home page
</NuxtLink>
</div>
</div>
</template>
<script>
export default {
layout: 'empty',
props: {
error: {
type: Object,
default: null,
},
},
data() {
return {
pageNotFound: '404 Not Found',
otherError: 'An error occurred',
}
},
head() {
const title =
this.error.statusCode === 404 ? this.pageNotFound : this.otherError
return {
title,
}
},
}
</script>
<style scoped>
h1 {
font-size: 20px;
}
</style>