Adding initial SSR fixes

Author: tnylea

composer.lock

@@ -3,28 +3,50 @@ import { onMounted, ref } from 'vue';
 type Appearance = 'light' | 'dark' | 'system';
 
 export function updateTheme(value: Appearance) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
     if (value === 'system') {
-        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+        const systemTheme = mediaQueryList.matches ? 'dark' : 'light';
         document.documentElement.classList.toggle('dark', systemTheme === 'dark');
     } else {
         document.documentElement.classList.toggle('dark', value === 'dark');
     }
 }
 
-const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+const mediaQuery = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const getStoredAppearance = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    return localStorage.getItem('appearance') as Appearance | null;
+};
 
 const handleSystemThemeChange = () => {
-    const currentAppearance = localStorage.getItem('appearance') as Appearance | null;
+    const currentAppearance = getStoredAppearance();
     updateTheme(currentAppearance || 'system');
 };
 
 export function initializeTheme() {
+    if (typeof window === 'undefined') {
+        return;
+    }
+
     // Initialize theme from saved preference or default to system...
-    const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+    const savedAppearance = getStoredAppearance();
     updateTheme(savedAppearance || 'system');
 
     // Set up system theme change listener...
-    mediaQuery.addEventListener('change', handleSystemThemeChange);
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
 }
 
 export function useAppearance() {
@@ -42,8 +64,10 @@ export function useAppearance() {
 
     function updateAppearance(value: Appearance) {
         appearance.value = value;
-        localStorage.setItem('appearance', value);
-        updateTheme(value);
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('appearance', value);
+            updateTheme(value);
+        }
     }
 
     return {

resources/js/composables/useAppearance.ts

@@ -20,7 +20,8 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-const currentPath = window.location.pathname;
+// For SSR, we can't access the window location
+const currentPath = (typeof window === 'undefined') ? '' : window.location.pathname;
 </script>
 
 <template>

resources/js/layouts/settings/Layout.vue

@@ -0,0 +1,38 @@
+import { createInertiaApp } from '@inertiajs/vue3'
+import createServer from '@inertiajs/vue3/server'
+import { renderToString } from '@vue/server-renderer'
+import { createSSRApp, h } from 'vue'
+import { type RouteName, route } from 'ziggy-js'
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
+
+createServer(page =>
+  createInertiaApp({
+    page,
+    render: renderToString,
+    title: (title) => `${title} - ${appName}`,
+    resolve: name => {
+      const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
+      return pages[`./Pages/${name}.vue`]
+    },
+    setup({ App, props, plugin }) {
+      // Set up global route function for SSR
+      // @ts-expect-error - Ziggy types
+      global.route = <T extends RouteName>(name: T, params?: any, absolute?: boolean) =>
+        route(name, params, absolute, {
+          // @ts-expect-error - Ziggy types
+          ...page.props.ziggy,
+          // @ts-expect-error - Ziggy types
+          location: new URL(page.props.ziggy.location),
+        })
+
+      const app = createSSRApp({
+        render: () => h(App, props),
+      })
+
+      app.use(plugin)
+      
+      return app
+    },
+  }),
+)

resources/js/ssr.tsx

@@ -0,0 +1,5 @@
+import type { route as routeFn } from "ziggy-js";
+
+declare global {
+    const route: typeof routeFn;
+}

resources/js/types/globals.d.ts

@@ -1,5 +1,6 @@
 import type { PageProps } from '@inertiajs/core';
 import type { LucideIcon } from 'lucide-vue-next';
+import type { Config } from "ziggy-js";
 
 export interface Auth {
     user: User;
@@ -21,6 +22,7 @@ export interface SharedData extends PageProps {
     name: string;
     quote: { message: string; author: string };
     auth: Auth;
+    ziggy: Config & { location: string };
 }
 
 export interface User {

resources/js/types/index.ts resources/js/types/index.d.tsresources/js/types/index.ts renamed to resources/js/types/index.d.ts

@@ -119,5 +119,10 @@
         // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
         "skipLibCheck": true /* Skip type checking all .d.ts files. */
     },
-    "include": ["resources/js/**/*.ts", "resources/js/**/*.d.ts", "resources/js/**/*.tsx", "resources/js/**/*.vue"]
+    "include": [
+        "resources/js/**/*.ts",
+        "resources/js/**/*.d.ts",
+        "resources/js/**/*.tsx", 
+        "resources/js/**/*.vue"
+    ]
 }

resources/js/types/ziggy.ts resources/js/types/ziggy.d.tsresources/js/types/ziggy.ts renamed to resources/js/types/ziggy.d.ts

@@ -3,12 +3,14 @@ import autoprefixer from 'autoprefixer';
 import laravel from 'laravel-vite-plugin';
 import path from 'path';
 import tailwindcss from 'tailwindcss';
+import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/js/app.ts'],
+            ssr: 'resources/js/ssr.tsx',
             refresh: true,
         }),
         vue({
@@ -23,6 +25,7 @@ export default defineConfig({
     resolve: {
         alias: {
             '@': path.resolve(__dirname, './resources/js'),
+            'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
         },
     },
     css: {