Skip to content

Commit c17ef70

Browse files
TimKunze96NicolasKiontaylorotwell
authored
Fix various TypeScript issues, simplify ziggy-js integration and shared props usage (#127)
* Move type declaration into definition file * Add types for page resolver * Refactor page props: Allows usage of usePage without having to explicitly type the props * Simplify route type * Remove unnecessary alias * Remove type definition reference. This type reference does not exist. * Simplify ssr logic: Removed unnecessary config and route declaration * Fix types * Fix createSSRApp call and set clustering to true * Remove type duplicate (see ziggy.d.ts) * Update dependencies --------- Co-authored-by: Nicolas Kion <[email protected]> Co-authored-by: Taylor Otwell <[email protected]>
1 parent 34d788d commit c17ef70

File tree

14 files changed

+56
-72
lines changed

14 files changed

+56
-72
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/app.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,6 @@ import { createApp, h } from 'vue';
77
import { ZiggyVue } from 'ziggy-js';
88
import { initializeTheme } from './composables/useAppearance';
99

10-
// Extend ImportMeta interface for Vite...
11-
declare module 'vite/client' {
12-
interface ImportMetaEnv {
13-
readonly VITE_APP_NAME: string;
14-
[key: string]: string | boolean | undefined;
15-
}
16-
17-
interface ImportMeta {
18-
readonly env: ImportMetaEnv;
19-
readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
20-
}
21-
}
22-
2310
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
2411

2512
createInertiaApp({

‎resources/js/components/AppShell.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
22
import { SidebarProvider } from '@/components/ui/sidebar';
3-
import { SharedData } from '@/types';
43
import { usePage } from '@inertiajs/vue3';
54
65
interface Props {
@@ -9,7 +8,7 @@ interface Props {
98
109
defineProps<Props>();
1110
12-
const isOpen = usePage<SharedData>().props.sidebarOpen;
11+
const isOpen = usePage().props.sidebarOpen;
1312
</script>
1413

1514
<template>

‎resources/js/components/NavMain.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<script setup lang="ts">
22
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
3-
import { type NavItem, type SharedData } from '@/types';
3+
import { type NavItem } from '@/types';
44
import { Link, usePage } from '@inertiajs/vue3';
55
66
defineProps<{
77
items: NavItem[];
88
}>();
99
10-
const page = usePage<SharedData>();
10+
const page = usePage();
1111
</script>
1212

1313
<template>

‎resources/js/components/NavUser.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
import UserInfo from '@/components/UserInfo.vue';
33
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
44
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
5-
import { type SharedData, type User } from '@/types';
5+
import { type User } from '@/types';
66
import { usePage } from '@inertiajs/vue3';
77
import { ChevronsUpDown } from 'lucide-vue-next';
88
import UserMenuContent from './UserMenuContent.vue';
99
10-
const page = usePage<SharedData>();
10+
const page = usePage();
1111
const user = page.props.auth.user as User;
1212
const { isMobile, state } = useSidebar();
1313
</script>

‎resources/js/components/UserInfo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '')
2121

2222
<template>
2323
<Avatar class="h-8 w-8 overflow-hidden rounded-lg">
24-
<AvatarImage v-if="showAvatar" :src="user.avatar" :alt="user.name" />
24+
<AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
2525
<AvatarFallback class="rounded-lg text-black dark:text-white">
2626
{{ getInitials(user.name) }}
2727
</AvatarFallback>

‎resources/js/pages/Welcome.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ import { Head, Link } from '@inertiajs/vue3';
215215
/>
216216
</g>
217217
<g
218-
:style="{ mixBlendMode: 'plus-darker' }"
218+
:style="`mixBlendMode: 'plus-darker'`"
219219
class="translate-y-0 opacity-100 transition-all delay-300 duration-750 starting:translate-y-4 starting:opacity-0"
220220
>
221221
<path

‎resources/js/pages/settings/Profile.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Input } from '@/components/ui/input';
99
import { Label } from '@/components/ui/label';
1010
import AppLayout from '@/layouts/AppLayout.vue';
1111
import SettingsLayout from '@/layouts/settings/Layout.vue';
12-
import { type BreadcrumbItem, type SharedData, type User } from '@/types';
12+
import { type BreadcrumbItem, type User } from '@/types';
1313
1414
interface Props {
1515
mustVerifyEmail: boolean;
@@ -25,7 +25,7 @@ const breadcrumbs: BreadcrumbItem[] = [
2525
},
2626
];
2727
28-
const page = usePage<SharedData>();
28+
const page = usePage();
2929
const user = page.props.auth.user as User;
3030
3131
const form = useForm({

‎resources/js/ssr.ts‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { createInertiaApp } from '@inertiajs/vue3';
22
import createServer from '@inertiajs/vue3/server';
33
import { renderToString } from '@vue/server-renderer';
44
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
5-
import { createSSRApp, h } from 'vue';
6-
import { route as ziggyRoute } from 'ziggy-js';
5+
import { createSSRApp, DefineComponent, h } from 'vue';
6+
import { ZiggyVue } from 'ziggy-js';
77

88
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
99

@@ -12,30 +12,20 @@ createServer((page) =>
1212
page,
1313
render: renderToString,
1414
title: (title) => `${title} - ${appName}`,
15-
resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue')),
16-
setup({ App, props, plugin }) {
17-
const app = createSSRApp({ render: () => h(App, props) });
18-
19-
// Configure Ziggy for SSR...
20-
const ziggyConfig = {
21-
...page.props.ziggy,
22-
location: new URL(page.props.ziggy.location),
23-
};
24-
25-
// Create route function...
26-
const route = (name: string, params?: any, absolute?: boolean) => ziggyRoute(name, params, absolute, ziggyConfig);
27-
28-
// Make route function available globally...
29-
app.config.globalProperties.route = route;
30-
31-
// Make route function available globally for SSR...
32-
if (typeof window === 'undefined') {
33-
global.route = route;
34-
}
35-
36-
app.use(plugin);
37-
38-
return app;
39-
},
15+
resolve: resolvePage,
16+
setup: ({ App, props, plugin }) =>
17+
createSSRApp({ render: () => h(App, props) })
18+
.use(plugin)
19+
.use(ZiggyVue, {
20+
...page.props.ziggy,
21+
location: new URL(page.props.ziggy.location),
22+
}),
4023
}),
24+
{ cluster: true },
4125
);
26+
27+
function resolvePage(name: string) {
28+
const pages = import.meta.glob<DefineComponent>('./pages/**/*.vue');
29+
30+
return resolvePageComponent<DefineComponent>(`./pages/${name}.vue`, pages);
31+
}

‎resources/js/types/globals.d.ts‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1-
import type { route as routeFn } from 'ziggy-js';
1+
import { AppPageProps } from '@/types/index';
22

3-
declare global {
4-
const route: typeof routeFn;
3+
// Extend ImportMeta interface for Vite...
4+
declare module 'vite/client' {
5+
interface ImportMetaEnv {
6+
readonly VITE_APP_NAME: string;
7+
[key: string]: string | boolean | undefined;
8+
}
9+
10+
interface ImportMeta {
11+
readonly env: ImportMetaEnv;
12+
readonly glob: <T>(pattern: string) => Record<string, () => Promise<T>>;
13+
}
14+
}
15+
16+
declare module '@inertiajs/core' {
17+
interface PageProps extends InertiaPageProps, AppPageProps {}
18+
}
19+
20+
declare module '@vue/runtime-core' {
21+
interface ComponentCustomProperties {
22+
$inertia: typeof Router;
23+
$page: Page;
24+
$headManager: ReturnType<typeof createHeadManager>;
25+
}
526
}

0 commit comments

Comments
 (0)