From 65c777b91322ff1ef028082f66cf8ac6776a9040 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 17 Apr 2025 13:09:15 +0200 Subject: [PATCH 01/11] Move type declaration into definition file --- resources/js/app.ts | 13 ------------- resources/js/types/globals.d.ts | 13 +++++++++++++ 2 files changed, 13 insertions(+), 13 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..70ee5580 100644 --- a/resources/js/types/globals.d.ts +++ b/resources/js/types/globals.d.ts @@ -3,3 +3,16 @@ import type { route as routeFn } from 'ziggy-js'; 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>; + } +} From 7590aa3108c4fb7fb2364fa21ef9c7a5cc8b01e7 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 17 Apr 2025 13:13:32 +0200 Subject: [PATCH 02/11] Add types for page resolver --- resources/js/ssr.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts index 5b293780..63a73e58 100644 --- a/resources/js/ssr.ts +++ b/resources/js/ssr.ts @@ -2,7 +2,7 @@ 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 { createSSRApp, DefineComponent, h } from 'vue'; import { route as ziggyRoute } 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) }); @@ -39,3 +39,9 @@ createServer((page) => }, }), ); + +function resolvePage(name: string) { + const pages = import.meta.glob('./pages/**/*.vue'); + + return resolvePageComponent(`./pages/${name}.vue`, pages); +} From 7642a0b9970f240ec9bc82e67f25cf12a3be813d Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 14:45:06 +0200 Subject: [PATCH 03/11] Refactor page props: Allows usage of usePage without having to explicitly type the props --- resources/js/types/globals.d.ts | 10 +++++----- resources/js/types/index.d.ts | 5 ++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/resources/js/types/globals.d.ts b/resources/js/types/globals.d.ts index 70ee5580..be9dc4bb 100644 --- a/resources/js/types/globals.d.ts +++ b/resources/js/types/globals.d.ts @@ -1,8 +1,4 @@ -import type { route as routeFn } from 'ziggy-js'; - -declare global { - const route: typeof routeFn; -} +import { AppPageProps } from '@/types/index'; // Extend ImportMeta interface for Vite... declare module 'vite/client' { @@ -16,3 +12,7 @@ declare module 'vite/client' { readonly glob: (pattern: string) => Record Promise>; } } + +declare module '@inertiajs/core' { + interface PageProps extends InertiaPageProps, AppPageProps {} +} \ No newline at end of file diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts index 8a53a5a4..0da9567c 100644 --- a/resources/js/types/index.d.ts +++ b/resources/js/types/index.d.ts @@ -1,4 +1,3 @@ -import type { PageProps } from '@inertiajs/core'; import type { LucideIcon } from 'lucide-vue-next'; import type { Config } from 'ziggy-js'; @@ -18,13 +17,13 @@ export interface NavItem { isActive?: boolean; } -export interface SharedData extends PageProps { +export type AppPageProps = Record> = T & { name: string; quote: { message: string; author: string }; auth: Auth; ziggy: Config & { location: string }; sidebarOpen: boolean; -} +}; export interface User { id: number; From 4171b0a514acb2563a3b82207c551f7797d83b6b Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 14:46:09 +0200 Subject: [PATCH 04/11] Simplify route type --- resources/js/types/globals.d.ts | 11 ++++++++++- resources/js/types/ziggy.d.ts | 5 ++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/resources/js/types/globals.d.ts b/resources/js/types/globals.d.ts index be9dc4bb..0dc41dbf 100644 --- a/resources/js/types/globals.d.ts +++ b/resources/js/types/globals.d.ts @@ -15,4 +15,13 @@ declare module 'vite/client' { declare module '@inertiajs/core' { interface PageProps extends InertiaPageProps, AppPageProps {} -} \ No newline at end of file +} + +declare module '@vue/runtime-core' { + interface ComponentCustomProperties { + $inertia: typeof Router; + $page: Page; + $headManager: ReturnType; + route: AppRouter; + } +} diff --git a/resources/js/types/ziggy.d.ts b/resources/js/types/ziggy.d.ts index 1bcedbe4..f74292aa 100644 --- a/resources/js/types/ziggy.d.ts +++ b/resources/js/types/ziggy.d.ts @@ -1,8 +1,7 @@ -import { RouteParams, Router } from 'ziggy-js'; +import { route } from 'ziggy-js'; declare global { - function route(): Router; - function route(name: string, params?: RouteParams | undefined, absolute?: boolean): string; + let route: typeof route; } declare module '@vue/runtime-core' { From e3845bd347802fbe0a80688fe87d4fcc60df094b Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 14:48:39 +0200 Subject: [PATCH 05/11] Remove unnecessary alias --- tsconfig.json | 1 - vite.config.ts | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index b404281d..503c24f9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -35,7 +35,6 @@ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ "paths": { /* Specify a set of entries that re-map imports to additional lookup locations. */ "@/*": ["./resources/js/*"], - "ziggy-js": ["./vendor/tightenco/ziggy"] }, // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ diff --git a/vite.config.ts b/vite.config.ts index 57800670..a235573f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,8 +1,7 @@ import vue from '@vitejs/plugin-vue'; import laravel from 'laravel-vite-plugin'; import path from 'path'; -import tailwindcss from "@tailwindcss/vite"; -import { resolve } from 'node:path'; +import tailwindcss from '@tailwindcss/vite'; import { defineConfig } from 'vite'; export default defineConfig({ @@ -25,7 +24,6 @@ export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './resources/js'), - 'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'), }, }, }); From 8c435d736dd507d74d67eccc6e4b874826d69d65 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 14:50:15 +0200 Subject: [PATCH 06/11] Remove type definition reference. This type reference does not exist. --- tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 503c24f9..93d12bcd 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -40,7 +40,6 @@ // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ "types": [ "vite/client", - "vue/tsx", "./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 62710b83633e6d4e859be1652a102b39177d3325 Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 14:52:21 +0200 Subject: [PATCH 07/11] Simplify ssr logic: Removed unnecessary config and route declaration --- resources/js/ssr.ts | 35 +++++++++-------------------------- 1 file changed, 9 insertions(+), 26 deletions(-) diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts index 63a73e58..5f52e3ba 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, DefineComponent, h } from 'vue'; -import { route as ziggyRoute } from 'ziggy-js'; +import { createApp, DefineComponent, h } from 'vue'; +import { ZiggyVue } from 'ziggy-js'; const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; @@ -13,30 +13,13 @@ createServer((page) => render: renderToString, title: (title) => `${title} - ${appName}`, resolve: resolvePage, - setup({ App, props, plugin }) { - const app = createSSRApp({ render: () => h(App, props) }); - - // Configure Ziggy for SSR... - const ziggyConfig = { - ...page.props.ziggy, - location: new URL(page.props.ziggy.location), - }; - - // Create route function... - const route = (name: string, params?: any, absolute?: boolean) => ziggyRoute(name, params, absolute, ziggyConfig); - - // Make route function available globally... - app.config.globalProperties.route = route; - - // Make route function available globally for SSR... - if (typeof window === 'undefined') { - global.route = route; - } - - app.use(plugin); - - return app; - }, + setup: ({ App, props, plugin }) => + createApp({ render: () => h(App, props) }) + .use(plugin) + .use(ZiggyVue, { + ...page.props.ziggy, + location: new URL(page.props.ziggy.location), + }), }), ); From 33ebad8c7e23b88af27bbf7cab5008a815fde0eb Mon Sep 17 00:00:00 2001 From: Tim Kunze Date: Thu, 24 Apr 2025 15:48:08 +0200 Subject: [PATCH 08/11] Fix types --- resources/js/components/AppShell.vue | 4 +--- resources/js/components/NavMain.vue | 6 +++--- resources/js/components/NavUser.vue | 8 ++++---- resources/js/components/UserInfo.vue | 2 +- resources/js/pages/Welcome.vue | 2 +- resources/js/pages/settings/Profile.vue | 4 ++-- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/resources/js/components/AppShell.vue b/resources/js/components/AppShell.vue index 2022061d..95281014 100644 --- a/resources/js/components/AppShell.vue +++ b/resources/js/components/AppShell.vue @@ -1,15 +1,13 @@