Set up Not Found views

resources/js_vue3/router/index.js

@@ -59,8 +59,8 @@ const router = createRouter({
 
         { path: '/about', name: 'about', component: About, meta: { showAbout: true } },
         { path: '/error', name: 'genericError', component: Errors, meta: { middlewares: [noEmptyError], err: null } },
-        // { path: '/404', name: '404',component: Errors, props: true },
-        // { path: '*', redirect: { name: '404' } },
+        { path: '/404', name: '404', component: Errors, props: true },
+        { path: '/:pathMatch(.*)*', name: 'notFound', component: Errors, props: true },
 
 		// Lazy loaded view
 		{ path: '/about', name: 'about', component: () => import('../views/About.vue') }

resources/js_vue3/services/httpClientFactory.js

@@ -66,11 +66,17 @@ export const httpClientFactory = (endpoint = 'api') => {
                 return Promise.reject(error)
             }
 
+            // Not found
+            if (error.response.status === 404) {
+                useNotifyStore().notFound()
+                return new Promise(() => {})
+            }
+
             // api calls are stateless so when user inactivity is detected
             // by the backend middleware, it cannot logout the user directly
             // so it returns a 418 response.
             // We catch the 418 response and log the user out
-            if ( error.response.status === 418 ) {
+            if (error.response.status === 418) {
                 const user = useUserStore()
                 user.logout()
             }

resources/js_vue3/stores/notify.js

@@ -46,6 +46,10 @@ export const useNotifyStore = defineStore({
             // 
         },
 
+        notFound(err) {
+            router.push({ name: '404' })
+        },
+
         error(err) {
             this.parseError(err)
             router.push({ name: 'genericError' })

resources/js_vue3/views/Error.vue

@@ -23,8 +23,8 @@
 
 <template>
     <div class="error-message">
-        <modal v-model="showModal" :closable="props.closable" @modal-closed="exit">
-            <div class="error-message" v-if="$route.name == '404'">
+        <modal v-model="showModal" :closable="props.closable">
+            <div class="error-message" v-if="$route.name == '404' || $route.name == 'notFound'">
                 <p class="error-404"></p>
                 <p>{{ $t('errors.resource_not_found') }}</p>
             </div>