feat(page): added 404 page

3 files changed, 36 insertions, 0 deletions

diff --git a/src/pages/404.page.vue b/src/pages/404.page.vue
new file mode 100644
index 0000000..87cbb0a
--- /dev/null
+++ b/src/pages/404.page.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="e404-wrapper">
+        <n-result
+            status="404"
+            title="404 Not Found"
+            description="Sorry, this page does not seem to extist"
+        >
+            <template #footer>
+                <router-link to="/" #="{ navigate, href }" custom>
+                    <n-button
+                        tag="a"
+                        :href="href"
+                        secondary
+                        @click="navigate"
+                        type="success"
+                    >Back home</n-button>
+                </router-link>
+            </template>
+        </n-result>
+    </div>
+</template>
+
+
+<style scoped>
+.e404-wrapper {
+    padding-top: 150px;
+}
+</style>
\ No newline at end of file
diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 50bb9b5..86de7fb 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -38,9 +38,11 @@ import {
   NMenu,
   NMessageProvider,
   NPageHeader,
+  NResult,
 } from 'naive-ui';
 
 const components = [
+  NResult,
   NPageHeader,
   NMessageProvider,
   NLayout,
diff --git a/src/router.ts b/src/router.ts
index 00f39c8..68126b5 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,6 +1,7 @@
 import { layouts } from './layouts/index';
 import { createRouter, createWebHistory } from 'vue-router';
 import HomePage from './pages/Home.page.vue';
+import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 
 const router = createRouter({
@@ -12,6 +13,7 @@ const router = createRouter({
       component: HomePage,
     },
     ...tools.map(({ path, name, component, ...config }) => ({ path, name, component, meta: { isTool: true, layout: layouts.toolLayout, name, ...config } })),
+    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   ],
 });