feat(general): add 404 error page

components/error/ErrorLayout.vue

@@ -0,0 +1,19 @@
+<template>
+    <ErrorLayoutInner>
+        <template #wrapper>
+            <slot name="wrapper" />
+        </template>
+        <template #container>
+            <slot name="container" />
+        </template>
+        <template #title>
+            <slot name="title" />
+        </template>
+        <template #subTitle>
+            <slot name="subTitle" />
+        </template>
+        <template #button>
+            <slot name="button" />
+        </template>
+    </ErrorLayoutInner>
+</template>

components/error/ErrorLayoutInner.vue

@@ -0,0 +1,21 @@
+<template>
+    <slot name="wrapper">
+        <div class="container mt-12">
+            <slot name="container">
+                <h1 class="mb-4 text-center text-4xl uppercase">
+                    <slot name="title">{{ $t('error.generalHeadline') }}</slot>
+                </h1>
+                <p class="mb-4 text-center">
+                    <slot name="subTitle" />
+                </p>
+                <div class="text-center">
+                    <slot name="button">
+                        <NuxtLinkLocale to="/">
+                            <UiButton variant="link">{{ $t('error.generalButton') }}</UiButton>
+                        </NuxtLinkLocale>
+                    </slot>
+                </div>
+            </slot>
+        </div>
+    </slot>
+</template>

components/error/ErrorNotFound.vue

@@ -0,0 +1,3 @@
+<template>
+    <ErrorNotFoundInner />
+</template>

components/error/ErrorNotFoundInner.vue

@@ -0,0 +1,10 @@
+<template>
+    <ErrorLayout>
+        <template #title>
+            {{ $t('error.404.heading') }}
+        </template>
+        <template #subTitle>
+            {{ $t('error.404.detail') }}
+        </template>
+    </ErrorLayout>
+</template>

docs/.vitepress/config.ts

@@ -31,6 +31,7 @@ export default defineConfig({
                 collapsed: true,
                 items: [
                     { text: 'CMS System', link: '/how-to/cms-system' },
+                    { text: 'Error Handling', link: '/how-to/error-handling'},
                 ],
             },
         ],

docs/how-to/error-handling.md

@@ -0,0 +1,36 @@
+# Http Error Handling
+
+## ErrorLayout
+The ErrorLayout component is used to display an error page. It comes with customizable slots that allow you to override key elements of the page, including the title, subtitle, button, layout. This documentation will guide you through how to use and customize these slots.
+
+### Default Structure
+
+By default, the ErrorLayout component includes the following:
+
+| Name      | Comment                                                                                       |
+|:----------|:----------------------------------------------------------------------------------------------|
+| Title     | A large text that indicates the error (e.g., "Page Not Found")                                |
+| Subtitle  | A smaller description of the error (e.g., "Sorry, the page you're looking for doesn't exist") |
+| Button    | A button that users can click to navigate back to a home or specific page                     |
+| Container | The container for the error message                                                           |
+| Wrapper   | The wrapper for the container                                                                 |
+
+### Basic Usage
+
+```vue
+<template>
+  <ErrorLayout>
+    <template #title>
+      Page Not Found
+    </template>
+    <template #subTitle>
+      The requested page could not be found
+    </template>
+    <template #button>
+      <div class="text-center"><a href="/">
+        <UiButton>Back to homepage</UiButton>
+      </a></div>
+    </template>
+  </ErrorLayout>
+</template>
+```

error.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { NuxtError } from '#app';
+import type {NuxtError} from '#app';
 
 const props = defineProps({
     // we don't need a default value -> it's always set
     // eslint-disable-next-line vue/require-default-prop
     error: Object as () => NuxtError,
 });
 
-const { locale } = useI18n();
+const {locale} = useI18n();
 const url = useRequestURL();
 const route = useRoute();
 const configStore = useConfigStore();
 await configStore.loadConfig();
-const shopName = configStore.get('core.basicInformation.shopName') as string|null ?? 'pond';
+const shopName = configStore.get('core.basicInformation.shopName') as string | null ?? 'pond';
 
 useHead(() => ({
-    title: `${shopName  } - ${ props.error?.statusCode}`,
+    title: `${shopName} - ${props.error?.statusCode}`,
     htmlAttrs: {
         lang: locale.value,
     },
@@ -26,14 +26,27 @@ useHead(() => ({
         },
     ],
 }));
+
+const pageNotFound = computed(() => props.error?.statusCode === 404);
 </script>
 
 <template>
     <NuxtLoadingIndicator />
     <LayoutHeader />
 
     <main class="container">
-        <h1>{{ error?.statusCode }}</h1>
-        <p>{{ error?.message }}</p>
+        <template v-if="pageNotFound">
+            <ErrorNotFound />
+        </template>
+        <template v-else>
+            <ErrorLayout>
+                <template #title>
+                    {{ error?.message }}
+                </template>
+                <template #subTitle>
+                    {{ error?.statusCode }}
+                </template>
+            </ErrorLayout>
+        </template>
     </main>
 </template>

i18n/locales/de-DE/error.json

@@ -5,6 +5,7 @@
             "detail": "Die angeforderte Seite konnte nicht gefunden werden."
         },
         "generalHeadline": "Leider lief etwas schief",
+        "generalButton": "Zurück zur Startseite",
         "CHECKOUT__CUSTOMER_NOT_FOUND": "Es konnte kein Account mit den angegebenen Zugangsdaten gefunden werden.",
         "CHECKOUT__CUSTOMER_AUTH_BAD_CREDENTIALS": "Es konnte kein Account mit den angegebenen Zugangsdaten gefunden werden."
     }

i18n/locales/en-GB/error.json

@@ -5,6 +5,7 @@
             "detail": "The requested page could not be found."
         },
         "generalHeadline": "Something went wrong, unfortunately.",
+        "generalButton": "Back to homepage",
         "CHECKOUT__CUSTOMER_NOT_FOUND": "No account could be found with the provided credentials.",
         "CHECKOUT__CUSTOMER_AUTH_BAD_CREDENTIALS": "No account could be found with the provided credentials."
     }