Merge pull request #284 from connorabbas/ssr-styled-mode-testing

SSR

Author: connorabbas

.gitignore

@@ -1,5 +1,6 @@
 /.phpunit.cache
 /node_modules
+/bootstrap/ssr
 /public/build
 /public/hot
 /public/storage

app/Http/Middleware/EncryptCookies.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;
+
+class EncryptCookies extends Middleware
+{
+    /**
+     * The names of the cookies that should not be encrypted.
+     *
+     * @var list<string>
+     */
+    protected $except = [
+        'colorScheme'
+    ];
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Inertia\Middleware;
+use Tighten\Ziggy\Ziggy;
 
 class HandleInertiaRequests extends Middleware
 {
@@ -37,6 +38,11 @@ public function share(Request $request): array
     {
         return [
             ...parent::share($request),
+            'colorScheme' => fn () => $request->cookie('colorScheme', 'auto'),
+            'ziggy' => fn () => [
+                ...(new Ziggy())->toArray(),
+                'location' => $request->url(),
+            ],
             'auth' => [
                 'user' => $request->user(),
             ],

bootstrap/app.php

@@ -1,6 +1,8 @@
 <?php
 
+use App\Http\Middleware\EncryptCookies;
 use App\Http\Middleware\HandleInertiaRequests;
+use Illuminate\Cookie\Middleware\EncryptCookies as BaseEncryptCookies;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -16,10 +18,15 @@
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware) {
-        $middleware->web(append: [
-            HandleInertiaRequests::class,
-            AddLinkHeadersForPreloadedAssets::class,
-        ]);
+        $middleware->web(
+            append: [
+                HandleInertiaRequests::class,
+                AddLinkHeadersForPreloadedAssets::class,
+            ],
+            replace: [
+                BaseEncryptCookies::class => EncryptCookies::class
+            ],
+        );
     })
     ->withExceptions(function (Exceptions $exceptions) {
         $exceptions->respond(function (Response $response, Throwable $exception, Request $request) {

package-lock.json

@@ -2,21 +2,10 @@
     "private": true,
     "type": "module",
     "scripts": {
+        "build": "vite build && vite build --ssr",
         "dev": "vite",
-        "build": "vite build",
         "lint": "eslint . --fix"
     },
-    "devDependencies": {
-        "@eslint/js": "^9.18.0",
-        "@typescript-eslint/eslint-plugin": "^8.19.1",
-        "@typescript-eslint/parser": "^8.19.1",
-        "@vue/eslint-config-typescript": "^14.5.0",
-        "eslint": "^9.18.0",
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-vue": "^9.32.0",
-        "typescript-eslint": "^8.19.1",
-        "vue-tsc": "^2.2.8"
-    },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.5",
         "@primeuix/themes": "^1.0.0",
@@ -25,7 +14,9 @@
         "@types/lodash-es": "^4.17.12",
         "@types/qs": "^6.9.18",
         "@vitejs/plugin-vue": "^5.2.3",
+        "@vue/server-renderer": "^3.5.14",
         "@vueuse/core": "^13.0.0",
+        "@vueuse/integrations": "^13.2.0",
         "globals": "^16.0.0",
         "laravel-vite-plugin": "^1.2.0",
         "lodash-es": "^4.17.21",
@@ -36,11 +27,23 @@
         "tailwindcss": "^4.0.17",
         "tailwindcss-primeui": "^0.6.1",
         "typescript": "^5.8.2",
+        "universal-cookie": "^7.2.2",
         "unplugin-vue-components": "^28.4.1",
         "vite": "^6.2.3",
         "vue": "^3.5.13",
         "ziggy-js": "^2.5.2"
     },
+    "devDependencies": {
+        "@eslint/js": "^9.18.0",
+        "@typescript-eslint/eslint-plugin": "^8.19.1",
+        "@typescript-eslint/parser": "^8.19.1",
+        "@vue/eslint-config-typescript": "^14.5.0",
+        "eslint": "^9.18.0",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-vue": "^9.32.0",
+        "typescript-eslint": "^8.19.1",
+        "vue-tsc": "^2.2.8"
+    },
     "optionalDependencies": {
         "@rollup/rollup-linux-x64-gnu": "4.37.0",
         "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",

package.json

@@ -8,6 +8,10 @@ body {
     padding: 0 !important;
 }
 
+#app {
+    visibility: hidden;
+}
+
 #nprogress .bar {
     z-index: 9999999 !important;
 }

resources/css/app.css

@@ -1,7 +1,7 @@
 import '../css/app.css';
 import '../css/tailwind.css';
 
-import { createApp, h } from 'vue';
+import { createSSRApp, h } from 'vue';
 import { createInertiaApp, Head, Link } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { ZiggyVue } from '../../vendor/tightenco/ziggy';
@@ -12,12 +12,9 @@ import ToastService from 'primevue/toastservice';
 import Container from '@/components/Container.vue';
 import PageTitleSection from '@/components/PageTitleSection.vue';
 
-import { useColorMode } from '@vueuse/core';
+import { useSiteColorMode } from '@/composables/useSiteColorMode';
 import themePreset from '@/theme/noir-preset';
 
-// Site light/dark mode
-const colorMode = useColorMode({ emitAuto: true });
-
 /* global Ziggy */
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -29,8 +26,10 @@ createInertiaApp({
             import.meta.glob('./pages/**/*.vue')
         ),
     setup({ el, App, props, plugin }) {
-        return createApp({ render: () => h(App, props) })
-            .provide('colorMode', colorMode)
+        // Site light/dark mode
+        const colorMode = useSiteColorMode({ emitAuto: true });
+
+        const app = createSSRApp({ render: () => h(App, props) })
             .use(plugin)
             .use(ZiggyVue, Ziggy)
             .use(PrimeVue, {
@@ -50,7 +49,14 @@ createInertiaApp({
             .component('InertiaLink', Link)
             .component('Container', Container)
             .component('PageTitleSection', PageTitleSection)
+            .provide('colorMode', colorMode)
             .mount(el);
+
+        // #app content set to hidden by default
+        // reduces jumpy initial render from SSR content (unstyled PrimeVue components)
+        el.style.visibility = 'visible';
+
+        return app;
     },
     progress: {
         color: 'var(--p-primary-500)',

resources/js/app.js

@@ -0,0 +1,13 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+
+const isMounted = ref(false);
+
+onMounted(() => {
+    isMounted.value = true;
+});
+</script>
+
+<template>
+    <slot v-if="isMounted" />
+</template>

resources/js/components/ClientOnly.vue

@@ -1,6 +1,5 @@
 import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
 import { usePage, useForm } from '@inertiajs/vue3';
-import { route } from 'ziggy-js';
 import { LayoutGrid, House, Info, Settings, LogOut, ExternalLink, FileSearch, FolderGit2 } from 'lucide-vue-next';
 import { MenuItem } from '@/types';
 
@@ -74,21 +73,23 @@ export function useAppLayout() {
 
     // Mobile menu
     const mobileMenuOpen = ref(false);
-    const windowWidth = ref(window.innerWidth);
-    const updateWidth = () => {
-        windowWidth.value = window.innerWidth;
-    };
-    onMounted(() => {
-        window.addEventListener('resize', updateWidth);
-    });
-    onUnmounted(() => {
-        window.removeEventListener('resize', updateWidth);
-    });
-    watchEffect(() => {
-        if (windowWidth.value > 1024) {
-            mobileMenuOpen.value = false;
-        }
-    });
+    if (typeof window !== 'undefined') {
+        const windowWidth = ref(window.innerWidth);
+        const updateWidth = () => {
+            windowWidth.value = window.innerWidth;
+        };
+        onMounted(() => {
+            window.addEventListener('resize', updateWidth);
+        });
+        onUnmounted(() => {
+            window.removeEventListener('resize', updateWidth);
+        });
+        watchEffect(() => {
+            if (windowWidth.value > 1024) {
+                mobileMenuOpen.value = false;
+            }
+        });
+    }
 
     return {
         currentRoute,

resources/js/composables/useAppLayout.ts

@@ -0,0 +1,43 @@
+import { useColorMode, type BasicColorSchema, type UseColorModeOptions } from '@vueuse/core';
+import { useCookies } from '@vueuse/integrations/useCookies';
+import type { CookieSetOptions } from 'universal-cookie';
+import { watch } from 'vue';
+
+interface SiteColorModeOptions extends UseColorModeOptions {
+    cookieKey?: string;
+    cookieOpts?: CookieSetOptions;
+    cookieColorMode?: BasicColorSchema;
+}
+
+export function useSiteColorMode(opts: SiteColorModeOptions = {}) {
+    const {
+        cookieKey = 'colorScheme',
+        cookieOpts: userOpts,
+        cookieColorMode,
+        ...rest
+    } = opts;
+
+    // a maxAge in seconds (365 days)
+    const defaultOpts: CookieSetOptions = {
+        path: '/',
+        maxAge: 365 * 24 * 60 * 60,
+        sameSite: 'lax',
+    };
+
+    const finalCookieOpts = { ...defaultOpts, ...userOpts };
+
+    const cookies = useCookies([cookieKey]);
+    const initialValue: BasicColorSchema = typeof window === 'undefined'
+        ? (cookieColorMode ?? 'auto')
+        : (cookies.get(cookieKey) as BasicColorSchema) ?? 'auto';
+
+    const colorMode = useColorMode({ initialValue, ...rest });
+
+    if (typeof window !== 'undefined') {
+        watch(colorMode, (mode) => {
+            cookies.set(cookieKey, mode, finalCookieOpts);
+        });
+    }
+
+    return colorMode;
+}

resources/js/composables/useSiteColorMode.ts

@@ -4,6 +4,7 @@ import { usePage } from '@inertiajs/vue3';
 import { useAppLayout } from '@/composables/useAppLayout';
 import { ChevronsUpDown, ChevronDown, Menu as MenuIcon } from 'lucide-vue-next';
 import ApplicationLogo from '@/components/ApplicationLogo.vue';
+import ClientOnly from '@/components/ClientOnly.vue';
 import Menu from '@/components/primevue/menu/Menu.vue';
 import Menubar from '@/components/primevue/menu/Menubar.vue';
 import PanelMenu from '@/components/primevue/menu/PanelMenu.vue';
@@ -38,43 +39,45 @@ const toggleMobileUserMenu = (event) => {
 
 <template>
     <div>
-        <Teleport to="body">
-            <!-- Mobile drawer menu -->
-            <Drawer
-                v-model:visible="mobileMenuOpen"
-                position="right"
-            >
-                <div>
-                    <PanelMenu
-                        :model="menuItems"
-                        class="mt-1 w-full"
-                    />
-                </div>
-                <template #footer>
-                    <div class="flex flex-col">
-                        <Button
-                            id="mobile-user-menu-btn"
-                            :label="page.props.auth.user.name"
-                            severity="secondary"
-                            size="large"
-                            pt:root:class="flex flex-row-reverse justify-between"
-                            @click="toggleMobileUserMenu($event)"
-                        >
-                            <template #icon>
-                                <ChevronsUpDown />
-                            </template>
-                        </Button>
-                        <Menu
-                            ref="mobile-user-menu"
-                            :model="userMenuItems"
-                            pt:root:class="z-[1200]"
-                            popup
+        <ClientOnly>
+            <Teleport to="body">
+                <!-- Mobile drawer menu -->
+                <Drawer
+                    v-model:visible="mobileMenuOpen"
+                    position="right"
+                >
+                    <div>
+                        <PanelMenu
+                            :model="menuItems"
+                            class="mt-1 w-full"
                         />
                     </div>
-                </template>
-            </Drawer>
-            <Toast position="top-center" />
-        </Teleport>
+                    <template #footer>
+                        <div class="flex flex-col">
+                            <Button
+                                id="mobile-user-menu-btn"
+                                :label="page.props.auth.user.name"
+                                severity="secondary"
+                                size="large"
+                                pt:root:class="flex flex-row-reverse justify-between"
+                                @click="toggleMobileUserMenu($event)"
+                            >
+                                <template #icon>
+                                    <ChevronsUpDown />
+                                </template>
+                            </Button>
+                            <Menu
+                                ref="mobile-user-menu"
+                                :model="userMenuItems"
+                                pt:root:class="z-[1200]"
+                                popup
+                            />
+                        </div>
+                    </template>
+                </Drawer>
+                <Toast position="top-center" />
+            </Teleport>
+        </ClientOnly>
         <div class="min-h-screen">
             <!-- Primary Navigation Menu -->
             <nav class="dynamic-bg shadow-sm">