Implement and Style 404 Error Page with Vue Router Integration #532

src/components/ErrorPage.vue

@@ -0,0 +1,68 @@
+<template>
+    <section class="page_404">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-12">
+            <div class="col-sm-10 col-sm-offset-1 text-center">
+              <div class="four_zero_four_bg">
+                <h1 class="text-center">404</h1>
+              </div>
+
+              <div class="contant_box_404">
+                <h2 class="h2">
+                  Look like you're lost
+                </h3>
+
+                <p>The page you are looking for is not available!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </template>
+
+  <script>
+  export default {
+    name: 'ErrorPage',
+  };
+  </script>
+
+  <style scoped>
+  .page_404 {
+    padding: 40px 0;
+    background: #fff;
+    font-family: 'Arvo', serif;
+  }
+
+  .page_404 img {
+    width: 100%;
+  }
+
+  .four_zero_four_bg {
+    background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
+    height: 400px;
+    background-position: center;
+  }
+
+  .four_zero_four_bg h1 {
+    font-size: 80px;
+  }
+
+  .four_zero_four_bg h3 {
+    font-size: 80px;
+  }
+
+  .link_404 {
+    color: #fff !important;
+    padding: 10px 20px;
+    background: #39ac31;
+    margin: 20px 0;
+    display: inline-block;
+  }
+
+  .contant_box_404 {
+    margin-top: -50px;
+  }
+  </style>
+

src/main.js

@@ -7,11 +7,14 @@ import VueVocabulary from '@creativecommons/vocabulary-components';
 // Analytics
 import * as Sentry from '@sentry/vue';
 
+// Router setup
+import router from './router'; // Import the router configuration
+
 Vue.config.productionTip = false;
+
 Vue.use(VueVocabulary);
 Vue.use(VueScrollTo);
 
-
 Sentry.init({
   dsn:
     process.env.NODE_ENV === 'production'
@@ -20,12 +23,11 @@ Sentry.init({
   logErrors: process.env.NODE_ENV !== 'production', // Only log errors in dev env
 });
 
-
-if(process.env.VUE_APP_CC_OUTPUT!=='embedded') {
+if (process.env.VUE_APP_CC_OUTPUT !== 'embedded') {
   new Vue({
     render: h => h(App),
+    router, // Add the router to the Vue instance
   }).$mount('#app');
 }
 
 export default App;
-

src/router/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import ErrorPage from '../components/ErrorPage.vue';
+
+Vue.use(Router);
+
+const router = new Router({
+  routes: [
+    {
+      path: '*', // Wildcard route for any unmatched routes
+      name: 'error',
+      component: ErrorPage // Show the ErrorPage component for 404
+    }
+  ]
+});
+
+export default router;