From 0d354b8a1cf16654e14a61d826178996d745764a Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 1/8] Add node for SSR and remove unknown vue/tsx types --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index b404281d..581e1121 100644 --- a/tsconfig.json +++ b/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. */ From 512bd783197645531f39ed530f767a342c544383 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 2/8] Fix ziggy related global types --- resources/js/types/ziggy.d.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/resources/js/types/ziggy.d.ts b/resources/js/types/ziggy.d.ts index 7c161f2a..b1b038ec 100644 --- a/resources/js/types/ziggy.d.ts +++ b/resources/js/types/ziggy.d.ts @@ -1,12 +1,11 @@ -import { Config, RouteParams } from 'ziggy-js'; +import { Router as ZiggyRouter } from 'ziggy-js'; -declare global { - function route(): Config; - function route(name: string, params?: RouteParams | undefined, absolute?: boolean): string; -} +type AppRouter = { + (): ZiggyRouter; + (name: string, params?: any, absolute?: boolean): string; +}; -declare module '@vue/runtime-core' { - interface ComponentCustomProperties { - route: typeof route; - } +declare global { + // eslint-disable-next-line no-var + var route: AppRouter; } From b1709db93741f30383c588d3a8c36b7610321579 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 3/8] Create AppPageProps Create AppPageProps that contain all shared props. This avoids having to import SharedProps whenever PageProps are being used --- resources/js/types/index.d.ts | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts index 853da1d9..190a8f2a 100644 --- a/resources/js/types/index.d.ts +++ b/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; From 127797fc399079af6076b1405167e784a0052a59 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 4/8] Move module declaration into definition file, override PageProps and add template macro types --- resources/js/app.ts | 13 ------------- resources/js/types/globals.d.ts | 32 +++++++++++++++++++++++++++++--- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/resources/js/app.ts b/resources/js/app.ts index 5670d9e8..939aca3d 100644 --- a/resources/js/app.ts +++ b/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: (pattern: string) => Record Promise>; - } -} - const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; createInertiaApp({ diff --git a/resources/js/types/globals.d.ts b/resources/js/types/globals.d.ts index b3c9b786..224dc8ec 100644 --- a/resources/js/types/globals.d.ts +++ b/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: (pattern: string) => Record Promise>; + } +} + +// 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; + route: AppRouter; + } } From 4fc4bc21188df9a029697d4892d7398ef9788824 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 5/8] Fix SSR type issues Use the correct method overload for the route properties during SSR and add type for page file imports --- resources/js/ssr.ts | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts index 5b293780..0ac78f9f 100644 --- a/resources/js/ssr.ts +++ b/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, 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?: any, absolute?: boolean): string; + function appRoute(name?: string, params?: any, 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('./Pages/**/*.vue'); + + return resolvePageComponent(`./Pages/${name}.vue`, pages); +} From fcb7514ab6ab2c84b040c9e6b62ab15bd68a5190 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Mon, 17 Mar 2025 19:34:45 +0100 Subject: [PATCH 6/8] Fix various TS issues Fixes various issues that would prevent typescript from compiling when vue-tsc is being used. --- resources/js/components/AppHeader.vue | 4 ++-- resources/js/components/AppSidebarHeader.vue | 2 +- resources/js/components/NavMain.vue | 4 ++-- resources/js/components/NavUser.vue | 10 +++++----- resources/js/components/TextLink.vue | 2 +- resources/js/components/UserInfo.vue | 2 +- resources/js/pages/Welcome.vue | 2 +- resources/js/pages/settings/Profile.vue | 4 ++-- 8 files changed, 15 insertions(+), 15 deletions(-) diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue index 84902b2e..b8409e4d 100644 --- a/resources/js/components/AppHeader.vue +++ b/resources/js/components/AppHeader.vue @@ -169,7 +169,7 @@ const rightNavItems: NavItem[] = [ class="relative size-10 w-auto rounded-full p-1 focus-within:ring-2 focus-within:ring-primary" > - + {{ getInitials(auth.user?.name) }} @@ -177,7 +177,7 @@ const rightNavItems: NavItem[] = [ - + diff --git a/resources/js/components/AppSidebarHeader.vue b/resources/js/components/AppSidebarHeader.vue index 1ff2baa7..462f3857 100644 --- a/resources/js/components/AppSidebarHeader.vue +++ b/resources/js/components/AppSidebarHeader.vue @@ -14,7 +14,7 @@ defineProps<{ >
-