Error page done (#452)

* Error page done * 🐛 (page) update template location to avoid overwriting docus error page Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com>
nuxt-themes · Jun 17, 2021 · 58b2b95 · 58b2b95 · vercel · Jun 17, 2021
1 parent 9c0377c
commit 58b2b95
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/nuxtjs.org/components/templates/Error.vue b/nuxtjs.org/components/templates/Error.vue
@@ -0,0 +1,33 @@
+<template>
+  <AppPage class="min-h-screen-sm">
+    <div class="mt-48 flex items-center justify-center flex-col px-4 md:px-0">
+      <h1 class="font-serif text-display-6 md:text-display-5 2xl:text-display-4 text-center">{{ error.message }}</h1>
+      <p class="text-center mt-4 mb-4">We couldn't find the page you are looking for.</p>
+      <SectionButton to="/" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300">
+        Go back home
+      </SectionButton>
+    </div>
+  </AppPage>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    error: {
+      type: Object,
+      required: true
+    }
+  },
+  head() {
+    return {
+      title: this.error.message
+    }
+  },
+  templateOptions: {
+    aside: false,
+    fluid: false
+  }
+})
+</script>
diff --git a/src/app/pages/_.vue b/src/app/pages/_.vue
@@ -35,7 +35,7 @@ export default defineComponent({
       .fetch()
 
     // Break on missing page query
-    if (!page) return error({ statusCode: 404, message: 'Page not found' })
+    if (!page) return error({ statusCode: 404, message: '404 - Page not found' })
 
     // Get page template
     page.template = $docus.getPageTemplate(page)