From 9624714af24ad70eee1b8508960a31167a28ffd1 Mon Sep 17 00:00:00 2001
From: CazSaa <cazsaaltink@gmail.com>
Date: Tue, 19 Oct 2021 18:12:49 +0200
Subject: [PATCH] Create basic error page
---
layouts/error.vue | 30 ++++++++++++++++++++++++++++++
layouts/errorLayout.vue | 23 +++++++++++++++++++++++
2 files changed, 53 insertions(+)
create mode 100644 layouts/error.vue
create mode 100644 layouts/errorLayout.vue
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 0000000..67b4d81
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,30 @@
+<template>
+ <div class="container error-container">
+ <h1 v-if="error.statusCode === 404">Page not found</h1>
+ <h1 v-else>An error occurred</h1>
+ <NuxtLink to="/">Go to the home page</NuxtLink>
+ </div>
+</template>
+
+<script>
+export default {
+ props: ['error'],
+ layout: 'errorLayout',
+}
+</script>
+
+<style lang="scss">
+.error-container {
+ justify-content: center;
+
+ h1 {
+ font-size: 2rem;
+ text-shadow: 0 5px 7px #222;
+ margin-bottom: 1em;
+ }
+
+ a {
+ text-decoration: underline;
+ }
+}
+</style>
diff --git a/layouts/errorLayout.vue b/layouts/errorLayout.vue
new file mode 100644
index 0000000..02c4488
--- /dev/null
+++ b/layouts/errorLayout.vue
@@ -0,0 +1,23 @@
+<template>
+ <div>
+ <Nuxt />
+ </div>
+</template>
+
+<script>
+export default {
+ head() {
+ return {
+ bodyAttrs: {
+ id: 'error-page'
+ }
+ }
+ }
+}
+</script>
+
+<style>
+#error-page {
+ background-image: linear-gradient(hsl(201, 16%, 43%), #003b70);
+}
+</style>
--
GitLab