Move module declaration into definition file, override PageProps and add template macro types

Author: TimKunze96

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/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;
+    }
 }