Fix typescript build error

Author: christophstockinger

resources/js/components/AppHeader.vue

@@ -16,7 +16,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/co
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { getInitials } from '@/composables/useInitials';
-import type { BreadcrumbItem, NavItem } from '@/types';
+import type { BreadcrumbItem, NavItem, SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-vue-next';
 import { computed } from 'vue';
@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 
-const page = usePage();
+const page = usePage<SharedData>();
 const auth = computed(() => page.props.auth);
 
 const isCurrentRoute = (url: string) => {

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 && breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>
         </div>

resources/js/components/TextLink.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
-import { Link } from '@inertiajs/vue3';
+import { InertiaLinkProps, Link } from '@inertiajs/vue3';
 
-interface Props {
-    href: string;
+interface Props extends Pick<InertiaLinkProps, "href" | "method" | "as"> {
     tabindex?: number;
-    method?: string;
-    as?: string;
-}
+};
 
 defineProps<Props>();
 </script>

resources/js/components/UserInfo.vue

@@ -2,26 +2,22 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { useInitials } from '@/composables/useInitials';
 import type { User } from '@/types';
-import { computed } from 'vue';
 
 interface Props {
     user: User;
     showEmail?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     showEmail: false,
 });
 
 const { getInitials } = useInitials();
-
-// Compute whether we should show the avatar image
-const showAvatar = computed(() => props.user.avatar && props.user.avatar !== '');
 </script>
 
 <template>
     <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :src="user.avatar" :alt="user.name" />
+        <AvatarImage v-if="user.avatar && user.avatar !== ''" :src="user.avatar" :alt="user.name" />
         <AvatarFallback class="rounded-lg text-black dark:text-white">
             {{ getInitials(user.name) }}
         </AvatarFallback>

resources/js/layouts/auth/AuthSplitLayout.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import AppLogoIcon from '@/components/AppLogoIcon.vue';
+import { SharedData } from '@/types';
 import { Link, usePage } from '@inertiajs/vue3';
 
-const page = usePage();
+const page = usePage<SharedData>();
 const name = page.props.name;
 const quote = page.props.quote;
 
@@ -20,7 +21,7 @@ defineProps<{
                 <AppLogoIcon class="mr-2 size-8 fill-current text-white" />
                 {{ name }}
             </Link>
-            <div v-if="quote" class="relative z-20 mt-auto">
+            <div v-if="quote && quote" class="relative z-20 mt-auto">
                 <blockquote class="space-y-2">
                     <p class="text-lg">&ldquo;{{ quote.message }}&rdquo;</p>
                     <footer class="text-sm text-neutral-300">{{ quote.author }}</footer>

resources/js/pages/Welcome.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { SharedData } from '@/types';
 import { Head, Link } from '@inertiajs/vue3';
+
+const props = defineProps<SharedData>();
 </script>
 
 <template>
@@ -11,7 +14,7 @@ import { Head, Link } from '@inertiajs/vue3';
         <header class="not-has-[nav]:hidden mb-6 w-full max-w-[335px] text-sm lg:max-w-4xl">
             <nav class="flex items-center justify-end gap-4">
                 <Link
-                    v-if="$page.props.auth.user"
+                    v-if="props.auth.user"
                     :href="route('dashboard')"
                     class="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                 >
@@ -214,6 +217,11 @@ import { Head, Link } from '@inertiajs/vue3';
                                 stroke-width="1"
                             />
                         </g>
+                        <!-- Workaround: -->
+                        <!-- 'plus-darker' is a valid value for the mixBlendMode key according to MDN -->
+                        <!-- However, the csstype library, which is used by @vue/runtime-dom, does not support this value. -->
+                        <!-- @see https://developer.mozilla.org/de/docs/Web/CSS/mix-blend-mode -->
+                        <!-- @vue-ignore -->
                         <g
                             :style="{ mixBlendMode: 'plus-darker' }"
                             class="duration-750 starting:translate-y-4 starting:opacity-0 translate-y-0 opacity-100 transition-all delay-300"