Fix issue when using Nova under a /path

README.md

@@ -74,7 +74,7 @@ class ExampleNovaResource extends Resource {
         return [
             ResourceNavigationField::make('Information'), // show all the available cards by default
             ResourceNavigationField::make('Activities')->withCards([ DailySalesCard::class, ClientProfileCard::class ]), // only show these cards when this tab is active
-            ResourceNavigationField::make('Settings')->withoutCards([ ... ]), // hide all cards when this tab is active
+            ResourceNavigationField::make('Settings')->withoutCards(), // hide all cards when this tab is active
         ];
     }
 

package.json

@@ -9,7 +9,7 @@
         "@vue/compiler-sfc": "^3.3.4",
         "laravel-mix": "^6.0.49",
         "mix-tailwindcss": "^1.3.0",
-        "postcss": "^8.4.29",
+        "postcss": "^8.4.31",
         "tailwindcss": "^3.3.3",
         "vue-loader": "^17.2.2"
     }

resources/js/components/RequestHighjacker.js

@@ -0,0 +1,47 @@
+const novaRequest = Nova.request
+
+const interceptors = []
+const interceptorsInstance = []
+
+Nova.request = (...params) => {
+
+    for (const param of params) {
+
+        for (const interceptor of interceptors) {
+            interceptor(param)
+        }
+
+    }
+
+    const axiosInstance = novaRequest(...params)
+
+    if (axiosInstance instanceof Promise) {
+        return axiosInstance
+    }
+
+    for (const interceptor of interceptors) {
+
+        interceptorsInstance.push({
+            instance: axiosInstance,
+            interceptor: axiosInstance.interceptors.request.use(config => interceptor(config)),
+        })
+
+    }
+
+    return axiosInstance
+
+}
+
+function cleanUpInterceptors() {
+
+    for (const { instance, interceptor } of interceptorsInstance) {
+        instance.interceptors.request.eject(interceptor)
+    }
+
+    while (interceptors.length) {
+        interceptors.pop()
+    }
+
+}
+
+export { interceptors, cleanUpInterceptors }

resources/js/components/ResourceNavigationCard.vue

@@ -21,50 +21,26 @@
 
 <script>
 
-    const novaRequest = Nova.request
+    import { interceptors } from './RequestHighjacker'
 
-    const interceptors = []
-    const interceptorsInstance = []
-
-    Nova.request = (...params) => {
+    interceptors.push(config => {
 
-        for (const param of params) {
+        try {
 
-            for (const interceptor of interceptors) {
-                interceptor(param)
+            if (config.params === undefined || config.params === null) {
+                config.params = {}
             }
 
-        }
+            const searchParams = new URLSearchParams(window.location.search)
 
-        const axiosInstance = novaRequest(...params)
-
-        if (axiosInstance instanceof Promise) {
-            return axiosInstance
-        }
-
-        for (const interceptor of interceptors) {
-
-            interceptorsInstance.push({
-                instance: axiosInstance,
-                interceptor: axiosInstance.interceptors.request.use(config => interceptor(config)),
-            })
-
-        }
-
-        return axiosInstance
-
-    }
-
-    interceptors.push(config => {
+            if (searchParams.has('x-tab')) {
+                config.params[ 'x-resource-navigation-tab' ] = searchParams.get('x-tab')
+            }
 
-        if (config.params === undefined) {
-            config.params = {}
-        }
+        } catch (error) {
 
-        const searchParams = new URLSearchParams(window.location.search)
+            console.log('ResourceNavigationCard.vue error:', error)
 
-        if (searchParams.has('x-tab')) {
-            config.params[ 'x-resource-navigation-tab' ] = searchParams.get('x-tab')
         }
 
         return config
@@ -78,17 +54,18 @@
                 onNavigate: slug => {
 
                     const searchParams = new URLSearchParams(window.location.search)
+                    const url = window.location.pathname.replace(new RegExp(`^${ Nova.config('base') }`), '')
 
-                    Nova.visit(window.location.pathname, {
+                    Nova.visit(url, {
                         data: {
                             ...Object.fromEntries(searchParams.entries()),
                             'x-tab': slug,
-                        }
+                        },
                     })
 
-                }
+                },
             }
-        }
+        },
     }
 
 </script>