Prefetch all pages on hover for better performance

resources/js/components/NavMain.vue

@@ -20,7 +20,7 @@ const page = usePage();
 
         <SidebarMenuItem :key="'dashboard'">
             <SidebarMenuButton as-child :is-active="urlIsActive(dashboard(), page.url)" :tooltip="'Dashboard'">
-                <Link :href="dashboard()">
+                <Link prefetch :href="dashboard()">
                 <component :is="LayoutGrid" class="text-gray-500" stroke-width="1.5" />
                 <span>Dashboard</span>
                 </Link>
@@ -38,13 +38,13 @@ const page = usePage();
         <SidebarMenu>
             <SidebarMenuItem v-for="item in group.items" :key="item.title">
                 <SidebarMenuButton as-child :is-active="urlIsActive(item.href, page.url)" :tooltip="item.title">
-                    <Link :href="item.href">
+                    <Link prefetch :href="item.href">
                     <component :is="item.icon" :class="item.color" stroke-width="1.5" />
                     <span>{{ item.title }}</span>
                     </Link>
                 </SidebarMenuButton>
                 <SidebarMenuAction v-if="item.action">
-                    <Link :href="item.action.href">
+                    <Link prefetch :href="item.action.href">
                     <component :is="item.action.icon" :class="item.action.color" stroke-width="1.5" size="0.833rem" />
                     <span class="sr-only">{{ item.action.title }}</span>
                     </Link>

resources/js/layouts/settings/Layout.vue

@@ -46,7 +46,7 @@ const currentPath = typeof window !== undefined ? window.location.pathname : '';
                         :class="['w-full justify-start', { 'bg-muted': urlIsActive(item.href, currentPath) }]"
                         as-child
                     >
-                        <Link :href="item.href">
+                        <Link :href="item.href" prefetch>
                             {{ item.title }}
                         </Link>
                     </Button>

resources/js/pages/auth/Login.vue

@@ -9,7 +9,7 @@ import { Label } from '@/components/ui/label';
 import AuthBase from '@/layouts/AuthLayout.vue';
 import { register } from '@/routes';
 import { request } from '@/routes/password';
-import { Form, Head } from '@inertiajs/vue3';
+import { Form, Head, router } from '@inertiajs/vue3';
 import { LoaderCircle, Mail } from "lucide-vue-next"
 
 defineProps<{
@@ -47,7 +47,9 @@ defineProps<{
                 <div class="grid gap-2">
                     <div class="flex items-center justify-between">
                         <Label for="password" class="text-stone-300">Passwort</Label>
-                        <TextLink v-if="canResetPassword" :href="request()" class="text-sm text-amber-600! decoration-amber-700! hover:text-amber-500!" :tabindex="5"> Passwort
+                        <TextLink v-if="canResetPassword" :href="request()" prefetch
+                            class="text-sm text-amber-600! decoration-amber-700! hover:text-amber-500!" :tabindex="6">
+                            Passwort
                             vergessen? </TextLink>
                     </div>
                     <Input id="password" type="password" name="password" required :tabindex="2"
@@ -62,15 +64,17 @@ defineProps<{
                     </Label>
                 </div>
 
-                <Button :size="sm" :variant="'action'" type="submit" class="mt-4 w-full" :tabindex="4"
-                    :disabled="processing" data-test="login-button">
+                <Button variant="action" type="submit" class="mt-4 w-full" :tabindex="4" :disabled="processing"
+                    data-test="login-button">
                     <LoaderCircle v-if="processing" class="h-4 w-4 animate-spin" />
                     Anmelden
                 </Button>
             </div>
 
             <div class="text-center text-sm text-muted-foreground">
-                <TextLink :href="register()" :tabindex="5" class="text-sm text-amber-600! decoration-amber-700! hover:text-amber-500!">Konto erstellen</TextLink>
+                <TextLink :href="register()" prefetch :tabindex="5"
+                    class="text-sm text-amber-600! decoration-amber-700! hover:text-amber-500!">Konto erstellen
+                </TextLink>
             </div>
         </Form>
     </AuthBase>

resources/js/pages/settings/Profile.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
-import { edit } from '@/routes/profile';
 import { send } from '@/routes/verification';
-import { Form, Head, Link, usePage } from '@inertiajs/vue3';
+import { Form, Link, usePage } from '@inertiajs/vue3';
 
 import DeleteUser from '@/components/DeleteUser.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';