Adding updates to ssr file to include global route var

Author: tnylea

app/Http/Middleware/HandleInertiaRequests.php

@@ -5,6 +5,7 @@
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
 use Inertia\Middleware;
+use Tighten\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -38,13 +39,16 @@ public function share(Request $request): array
     {
         [$message, $author] = str(Inspiring::quotes()->random())->explode('-');
 
-        return [
-            ...parent::share($request),
+        return array_merge(parent::share($request), [
             'name' => config('app.name'),
             'quote' => ['message' => trim($message), 'author' => trim($author)],
             'auth' => [
                 'user' => $request->user(),
             ],
-        ];
+            'ziggy' => [
+                ...(new Ziggy)->toArray(),
+                'location' => $request->url(),
+            ],
+        ]);
     }
 }

resources/js/layouts/settings/Layout.vue

@@ -3,7 +3,7 @@ import Heading from '@/components/Heading.vue';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/vue3';
+import { Link, usePage } from '@inertiajs/vue3';
 
 const sidebarNavItems: NavItem[] = [
     {
@@ -20,8 +20,9 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-// For SSR, we can't access the window location
-const currentPath = (typeof window === 'undefined') ? '' : window.location.pathname;
+// Get the current path from Ziggy config
+const page = usePage();
+const currentPath = page.props.ziggy?.location ? new URL(page.props.ziggy.location).pathname : '';
 </script>
 
 <template>

resources/js/ssr.tsx

@@ -14,6 +14,8 @@ createServer((page) =>
     title: (title) => `${title} - ${appName}`,
     resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
     setup({ App, props, plugin }) {
+      const app = createSSRApp({ render: () => h(App, props) })
+
       // Configure Ziggy for SSR
       const ziggyConfig = {
         ...page.props.ziggy,
@@ -24,21 +26,14 @@ createServer((page) =>
       const route = (name: string, params?: any, absolute?: boolean) =>
         ziggyRoute(name, params, absolute, ziggyConfig)
 
+      // Make route function available globally
+      app.config.globalProperties.route = route
+
       // Make route function available globally for SSR
       if (typeof window === 'undefined') {
         global.route = route
       }
 
-      // Create the SSR app with route function in context
-      const app = createSSRApp({
-        render: () => h(App, props),
-        setup() {
-          return {
-            route,
-          }
-        },
-      })
-
       app.use(plugin)
 
       return app