Laravel Wayfinder (#108)

* Install `laravel/wayfinder`

* Configure

* Create tsconfig.json

* Update Show.vue

* Update Show.vue

* Update Show.vue

* Update Edit.vue

* Update Edit.vue

* Update Header.vue

* Update App.vue

* Update Show.vue

* Add logout link to email verification page

* Update Show.vue

* Update Show.vue

* Update Show.vue

* Remove Ziggy

Author: SebKay

.gitignore

@@ -5,6 +5,9 @@
 /public/storage
 /public/css
 /public/js
+/resources/js/actions
+/resources/js/routes
+/resources/js/wayfinder
 /storage/*.key
 /vendor
 .env

bun.lockb

@@ -12,14 +12,14 @@
         "laravel/pulse": "^1.2",
         "laravel/sanctum": "^4.0",
         "laravel/tinker": "^2.9",
+        "laravel/wayfinder": "^0.1.5",
         "pxlrbt/filament-environment-indicator": "^2.0",
         "sentry/sentry-laravel": "^4.7",
         "spatie/laravel-health": "^1.31",
         "spatie/laravel-permission": "^6.9",
         "spatie/security-advisories-health-check": "^1.2",
         "symfony/http-client": "^7.2",
-        "symfony/postmark-mailer": "^7.2",
-        "tightenco/ziggy": "^2.3"
+        "symfony/postmark-mailer": "^7.2"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.13",

composer.json

@@ -8,6 +8,7 @@
     "laravel-vite-plugin": "^1.2.0",
     "tailwindcss": "^4.1.6",
     "vite": "^6.3.5",
+    "vite-plugin-run": "^0.6.1",
     "vue": "^3.5.13"
   },
   "private": true,

composer.lock

@@ -1,3 +1,3 @@
 @utility text-link {
-    @apply underline hover:decoration-transparent transition-colors;
+    @apply underline cursor-pointer hover:decoration-transparent transition-colors;
 }

package.json

@@ -6,7 +6,7 @@
                     <div class="flex items-center">
                         <Link
                             class="shrink-0 text-brand-800"
-                            :href="route('home')"
+                            :href="home()"
                         >
                         <SparklesIcon class="size-7" />
                         </Link>
@@ -85,6 +85,8 @@
     import { ref, onMounted } from "vue";
     import { router } from '@inertiajs/vue3';
 
+    import { index as home } from "@js/actions/App/Http/Controllers/DashboardController";
+
     import {
         Sparkles as SparklesIcon,
         Menu as MenuIcon,

resources/css/utilities.css

@@ -21,50 +21,34 @@
 
 <script setup>
     import { computed, defineAsyncComponent } from "vue";
-    import { usePage } from '@inertiajs/vue3'
+
+    import { index as home } from "@js/actions/App/Http/Controllers/DashboardController";
+    import { edit as editAccount } from "@js/actions/App/Http/Controllers/AccountController";
+    import LogoutController from "@js/actions/App/Http/Controllers/LogoutController";
 
     const Header = defineAsyncComponent(() => import("@js/Components/Header.vue"));
     const Footer = defineAsyncComponent(() => import("@js/Components/Footer.vue"));
 
-    const page = usePage();
-
     const menu = computed(() => {
-        if (page.props.auth.loggedIn) {
-            return [
-                {
-                    label: "Dashboard",
-                    route: route("home"),
-                    condition: true,
-                    components: ['Dashboard/Index'],
-                },
-                {
-                    label: "Account",
-                    route: route("account.edit"),
-                    condition: true,
-                    components: ['Account/Edit', 'EmailVerification/Show'],
-                },
-                {
-                    label: "Logout",
-                    route: route("logout"),
-                    method: "post",
-                    condition: true,
-                    components: [],
-                },
-            ];
-        }
-
         return [
             {
-                label: "Login",
-                route: route("login"),
+                label: "Dashboard",
+                route: home(),
+                condition: true,
+                components: ['Dashboard/Index'],
+            },
+            {
+                label: "Account",
+                route: editAccount(),
                 condition: true,
-                components: ['Login/Show'],
+                components: ['Account/Edit', 'EmailVerification/Show'],
             },
             {
-                label: "Register",
-                route: route("register"),
+                label: "Logout",
+                route: LogoutController(),
+                method: "post",
                 condition: true,
-                components: ['Register/Show'],
+                components: [],
             },
         ];
     });

resources/js/Components/Header.vue

@@ -90,6 +90,8 @@
     import { ref } from "vue";
     import { useForm } from "@inertiajs/vue3";
 
+    import { update } from "@js/actions/App/Http/Controllers/AccountController";
+
     const title = ref("Update Account");
     const props = defineProps({
         user: Object,
@@ -103,8 +105,9 @@
     });
 
     const submitForm = () => {
-        accountForm.patch(route("account.update"), {
+        accountForm.submit(update(), {
             preserveScroll: true,
+            preserveState: 'errors',
         });
     };
 </script>

resources/js/Layouts/App.vue

@@ -21,6 +21,19 @@
                 </button>
             </div>
         </div>
+
+        <div class="mt-6 xl:mt-10">
+            <p class="text-center mt-3">
+                <Link
+                    class="text-link"
+                    :href="LogoutController()"
+                    method="post"
+                    as="button"
+                >
+                Logout
+                </Link>
+            </p>
+        </div>
     </div>
 </template>
 
@@ -36,12 +49,14 @@
     import { ref } from "vue";
     import { router } from "@inertiajs/vue3";
 
+    import LogoutController from "@js/actions/App/Http/Controllers/LogoutController";
+    import { update } from "@js/actions/App/Http/Controllers/EmailVerificationController";
+
     const title = ref("Verify Your Email");
 
     const resend = () => {
-        router.post(route('verification.send'), {
+        router.post(update().url, {
             preserveScroll: true,
-            preserveState: true,
         });
     };
 </script>