Fix TypeScript errors in ssr.ts & when using vue-tsc

resources/js/app.ts

@@ -7,19 +7,6 @@ import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
 
-// Extend ImportMeta interface for Vite...
-declare module 'vite/client' {
-    interface ImportMetaEnv {
-        readonly VITE_APP_NAME: string;
-        [key: string]: string | boolean | undefined;
-    }
-
-    interface ImportMeta {
-        readonly env: ImportMetaEnv;
-        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
-    }
-}
-
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({

resources/js/components/AppHeader.vue

@@ -169,15 +169,15 @@ const rightNavItems: NavItem[] = [
                                 class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary"
                             >
                                 <Avatar class="size-8 overflow-hidden rounded-full">
-                                    <AvatarImage v-if="auth.user.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
+                                    <AvatarImage v-if="auth.user?.avatar" :src="auth.user.avatar" :alt="auth.user.name" />
                                     <AvatarFallback class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white">
                                         {{ getInitials(auth.user?.name) }}
                                     </AvatarFallback>
                                 </Avatar>
                             </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end" class="w-56">
-                            <UserMenuContent :user="auth.user" />
+                            <UserMenuContent :user="auth.user!" />
                         </DropdownMenuContent>
                     </DropdownMenu>
                 </div>

resources/js/components/AppSidebarHeader.vue

@@ -14,7 +14,7 @@ defineProps<{
     >
         <div class="flex items-center gap-2">
             <SidebarTrigger class="-ml-1" />
-            <template v-if="breadcrumbs.length > 0">
+            <template v-if="breadcrumbs?.length">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>
         </div>

resources/js/components/NavMain.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
-import { type NavItem, type SharedData } from '@/types';
+import { type NavItem} from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 
 defineProps<{
     items: NavItem[];
 }>();
 
-const page = usePage<SharedData>();
+const page = usePage();
 </script>
 
 <template>

resources/js/components/NavUser.vue

@@ -2,12 +2,12 @@
 import UserInfo from '@/components/UserInfo.vue';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
-import { type SharedData, type User } from '@/types';
+import { type User } from '@/types';
 import { usePage } from '@inertiajs/vue3';
 import { ChevronsUpDown } from 'lucide-vue-next';
 import UserMenuContent from './UserMenuContent.vue';
 
-const page = usePage<SharedData>();
+const page = usePage();
 const user = page.props.auth.user as User;
 const { isMobile, state } = useSidebar();
 </script>
@@ -22,10 +22,10 @@ const { isMobile, state } = useSidebar();
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent 
-                    class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" 
+                <DropdownMenuContent
+                    class="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
-                    align="end" 
+                    align="end"
                     :side-offset="4"
                 >
                     <UserMenuContent :user="user" />

resources/js/components/TextLink.vue

@@ -4,7 +4,7 @@ import { Link } from '@inertiajs/vue3';
 interface Props {
     href: string;
     tabindex?: number;
-    method?: string;
+    method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
     as?: string;
 }
 

resources/js/components/UserInfo.vue

@@ -21,7 +21,7 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
 
 <template>
     <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar" :alt="user.name" />
+        <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
         <AvatarFallback class="rounded-lg text-black dark:text-white">
             {{ getInitials(user.name) }}
         </AvatarFallback>

resources/js/pages/Welcome.vue

@@ -215,7 +215,7 @@ import { Head, Link } from '@inertiajs/vue3';
                             />
                         </g>
                         <g
-                            :style="{ mixBlendMode: 'plus-darker' }"
+                            :style="`mixBlendMode: 'plus-darker'`"
                             class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"
                         >
                             <path

resources/js/pages/settings/Profile.vue

@@ -9,7 +9,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import AppLayout from '@/layouts/AppLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
-import { type BreadcrumbItem, type SharedData, type User } from '@/types';
+import { type BreadcrumbItem, type User } from '@/types';
 
 interface Props {
     mustVerifyEmail: boolean;
@@ -25,7 +25,7 @@ const breadcrumbs: BreadcrumbItem[] = [
     },
 ];
 
-const page = usePage<SharedData>();
+const page = usePage();
 const user = page.props.auth.user as User;
 
 const form = useForm({

resources/js/ssr.ts

@@ -2,8 +2,8 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import createServer from '@inertiajs/vue3/server';
 import { renderToString } from '@vue/server-renderer';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { createSSRApp, h } from 'vue';
-import { route as ziggyRoute } from 'ziggy-js';
+import { createSSRApp, DefineComponent, h } from 'vue';
+import { route, RouteParams, Router } from 'ziggy-js';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
@@ -12,7 +12,7 @@ createServer((page) =>
         page,
         render: renderToString,
         title: (title) => `${title} - ${appName}`,
-        resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
+        resolve: resolvePage,
         setup({ App, props, plugin }) {
             const app = createSSRApp({ render: () => h(App, props) });
 
@@ -22,15 +22,23 @@ createServer((page) =>
                 location: new URL(page.props.ziggy.location),
             };
 
-            // Create route function...
-            const route = (name: string, params?: any, absolute?: boolean) => ziggyRoute(name, params, absolute, ziggyConfig);
+            // bind config to ziggyRoute function
+            function appRoute(): Router;
+            function appRoute(name: string, params?: RouteParams<typeof name>, absolute?: boolean): string;
+            function appRoute(name?: string, params?: RouteParams<string>, absolute?: boolean): Router | string {
+                if (name === undefined) {
+                    return route();
+                }
+
+                return route(name, params, absolute, ziggyConfig);
+            }
 
             // Make route function available globally...
-            app.config.globalProperties.route = route;
+            app.config.globalProperties.route = appRoute;
 
             // Make route function available globally for SSR...
             if (typeof window === 'undefined') {
-                global.route = route;
+                global.route = appRoute;
             }
 
             app.use(plugin);
@@ -39,3 +47,9 @@ createServer((page) =>
         },
     }),
 );
+
+function resolvePage(name: string) {
+    const pages = import.meta.glob<DefineComponent>('./Pages/**/*.vue');
+
+    return resolvePageComponent<DefineComponent>(`./Pages/${name}.vue`, pages);
+}

resources/js/types/globals.d.ts

@@ -1,5 +1,31 @@
-import type { route as routeFn } from 'ziggy-js';
+import { AppPageProps } from '@/types/index';
+import { createHeadManager, Page, Router } from '@inertiajs/core';
 
-declare global {
-    const route: typeof routeFn;
+// Extend ImportMeta interface for Vite...
+declare module 'vite/client' {
+    interface ImportMetaEnv {
+        readonly VITE_APP_NAME: string;
+
+        [key: string]: string | boolean | undefined;
+    }
+
+    interface ImportMeta {
+        readonly env: ImportMetaEnv;
+        readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
+    }
+}
+
+// Declare shared props for Inertia and App pages...
+declare module '@inertiajs/core' {
+    interface PageProps extends InertiaPageProps, AppPageProps {}
+}
+
+// Add typings for Inertia's $page and $headManager properties...
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        $inertia: typeof Router;
+        $page: Page;
+        $headManager: ReturnType<typeof createHeadManager>;
+        route: AppRouter;
+    }
 }

resources/js/types/index.d.ts

@@ -1,10 +1,12 @@
-import type { PageProps } from '@inertiajs/core';
 import type { LucideIcon } from 'lucide-vue-next';
 import type { Config } from 'ziggy-js';
 
-export interface Auth {
-    user: User;
-}
+export type AppPageProps = {
+    name: string;
+    quote: { message: string; author: string };
+    auth: { user: User | null };
+    ziggy: Config & { location: string };
+};
 
 export interface BreadcrumbItem {
     title: string;
@@ -18,13 +20,6 @@ export interface NavItem {
     isActive?: boolean;
 }
 
-export interface SharedData extends PageProps {
-    name: string;
-    quote: { message: string; author: string };
-    auth: Auth;
-    ziggy: Config & { location: string };
-}
-
 export interface User {
     id: number;
     name: string;

resources/js/types/ziggy.d.ts

@@ -1,12 +1,6 @@
-import { Config, RouteParams } from 'ziggy-js';
+import { RouteParams, Router } from 'ziggy-js';
 
 declare global {
-    function route(): Config;
+    function route(): Router;
     function route(name: string, params?: RouteParams<typeof name> | undefined, absolute?: boolean): string;
 }
-
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        route: typeof route;
-    }
-}

tsconfig.json

@@ -41,7 +41,7 @@
         // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
         "types": [
             "vite/client",
-            "vue/tsx",
+            "node",
             "./resources/js/types"
         ] /* Specify type package names to be included without being referenced in a source file. */,
         // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */