Wayfinder Power: The Modern Laravel Route Generation Solution

<!-- resources/js/pages/SuperAdmin/Users/UserEdit.vue -->
<script setup lang="ts">
import InputError from '@/components/InputError.vue';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import AppLayout from '@/layouts/AppLayout.vue';
import type { BreadcrumbItem } from '@/types';
import { Head, useForm, Link } from '@inertiajs/vue3';
import { ArrowLeft, LoaderCircle } from 'lucide-vue-next';

// 🚀 WAYFINDER POWER: Type-safe route imports
// Generated functions with full TypeScript support
import { update as userUpdate, index as usersIndex } from '@/routes/users';

interface User {
  id: number | string;
  name: string;
  email: string;
}

const props = defineProps<{
  user: User;
}>();

// Breadcrumbs with Wayfinder URL generation
const breadcrumbs: BreadcrumbItem[] = [
  { title: 'User List', href: usersIndex().url },
  { title: `Edit: ${props.user.name}`, href: '' },
];

// Form initialization
const form = useForm({
  name: props.user.name,
  email: props.user.email,
  password: '',
  password_confirmation: '',
});

// Form submission using Wayfinder-generated route function
const submit = () => {
  form.submit(userUpdate({ user: props.user.id }), {
    preserveScroll: true,
    onSuccess: () => {
      form.reset('password', 'password_confirmation');
    },
    onError: () => {
      if (form.errors.password || form.errors.password_confirmation) {
        form.reset('password', 'password_confirmation');
      }
    },
  });
};

const resetForm = () => {
  form.reset();
  form.clearErrors();
};
</script>

<template>
  <Head :title="`Edit ${user.name}`" />

  <AppLayout :breadcrumbs="breadcrumbs">
    <div class="flex h-full flex-col gap-6 p-6">
      <header class="space-y-1">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Edit User</h1>
        <p class="text-sm text-muted-foreground">ID: {{ user.id }}</p>
      </header>

      <Card class="p-6">
        <form @submit.prevent="submit" class="space-y-6">
          <div class="grid gap-4">
            <!-- Name -->
            <div class="space-y-2">
              <Label for="name">Full Name</Label>
              <Input
                id="name"
                v-model="form.name"
                placeholder="John Doe"
                :disabled="form.processing"
              />
              <InputError :message="form.errors.name" />
            </div>

            <!-- Email -->
            <div class="space-y-2">
              <Label for="email">Email Address</Label>
              <Input
                id="email"
                type="email"
                v-model="form.email"
                placeholder="email@example.com"
                :disabled="form.processing"
              />
              <InputError :message="form.errors.email" />
            </div>

            <!-- Password Change -->
            <div class="space-y-4 border-t pt-4">
              <div class="space-y-1">
                <h3 class="text-lg font-medium">Change Password</h3>
                <p class="text-sm text-muted-foreground">Leave empty to keep current</p>
              </div>
              <div class="grid gap-4 md:grid-cols-2">
                <div class="space-y-2">
                  <Label for="password">New Password</Label>
                  <Input
                    id="password"
                    type="password"
                    v-model="form.password"
                    :disabled="form.processing"
                  />
                  <InputError :message="form.errors.password" />
                </div>
                <div class="space-y-2">
                  <Label for="password_confirmation">Confirmation</Label>
                  <Input
                    id="password_confirmation"
                    type="password"
                    v-model="form.password_confirmation"
                    :disabled="form.processing"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="flex justify-between gap-3 pt-2">
            <Link
              :href="usersIndex().url"
              class="rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-800 hover:bg-gray-200"
            >
              <ArrowLeft class="h-4 w-4" />
              Back to List
            </Link>

            <div class="flex gap-3">
              <button
                type="button"
                @click="resetForm"
                class="rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm hover:bg-secondary/80"
                :disabled="form.processing"
              >
                Reset
              </button>
              <button
                type="submit"
                class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
                :disabled="form.processing"
              >
                <span v-if="form.processing">
                  <LoaderCircle class="h-4 w-4 animate-spin mr-2" /> Saving...
                </span>
                <span v-else>Update User</span>
              </button>
            </div>
          </div>
        </form>
      </Card>
    </div>
  </AppLayout>
</template>

WAYFINDER'S SUPERPOWERS EXPLAINED

1. Type Safety & IntelliSense

// Before (Ziggy): String-based, error-prone
route('users.update', { user: id })

// After (Wayfinder): Type-safe, IDE-supported
userUpdate({ user: props.user.id })

Full TypeScript support with parameter validation
Autocomplete in your IDE
Compile-time errors for invalid routes

2. Zero Runtime Overhead

# Wayfinder generates routes at build time
npm run wayfinder

# Result: Pre-compiled JavaScript functions
# No runtime route parsing needed

3. Tree Shaking & Performance

// Only import what you need
import { update, index } from '@/routes/users';

// Unused routes are eliminated during build
// Smaller bundle size compared to Ziggy's global object

4. Framework Agnostic

// Works with Vue, React, Svelte, or vanilla JS
// Same API across different frontend frameworks

5. Modern Developer Experience

// Clean, functional approach
const editUrl = userEdit({ user: id }).url;
const editMethod = userEdit({ user: id }).method;

// VS Ziggy's object-oriented approach
route('users.edit', id)

6. Built-in Vite Integration

// vite.config.ts
import { wayfinder } from '@laravel/vite-plugin-wayfinder';

export default defineConfig({
  plugins: [
    wayfinder({
      formVariants: true,
      baseUrl: import.meta.env.VITE_APP_URL,
    }),
  ],
});

7. Route Parameter Validation

// Wayfinder validates parameters at compile time
userUpdate({ user: props.user.id }) //  Correct
userUpdate({ userId: props.user.id }) //  Compile error

// Ziggy would fail at runtime

8. Consistent API Design

// All route functions follow the same pattern
usersIndex()      // → { url: '/users', method: 'GET' }
usersCreate()     // → { url: '/users/create', method: 'GET' }
usersStore()      // → { url: '/users', method: 'POST' }
usersUpdate(params)// → { url: '/users/{id}', method: 'PUT' }

MIGRATION BENEFITS

From Ziggy to Wayfinder:

✅ 40% smaller route-related code
✅ Eliminated runtime route parsing
✅ Full TypeScript support
✅ Better developer experience
✅ Improved performance

PERFORMANCE COMPARISON

Feature	Ziggy	Wayfinder
Bundle Size	Larger (global object)	Smaller (tree-shakable)
Runtime Performance	Slower (parsing)	Faster (pre-compiled)
Type Safety	Limited	Excellent
IDE Support	Basic	Advanced
Learning Curve	Steeper	Easier

Laravel Wayfinder Is The Way