Wir erläutern Laravel Wayfinder – das Paket, das im Inertia-Starterkit anstelle von Ziggy eingesetzt wird. Vom typsicheren Bindeglied zwischen Laravel-Backend und TypeScript-Frontend über die Unterschiede zu Ziggy, Installation und Grundgebrauch bis zu den im next-Branch entwickelten Next-Generation-Features.
Laravel Wayfinder ist ein Paket, das ein Laravel-Backend reibungslos mit einem TypeScript-Frontend verbindet. Es erzeugt aus Controllern und Routen vollständig typisierte TypeScript-Funktionen, sodass Sie Laravel-Endpoints direkt als Funktion aus dem Frontend aufrufen können.Hartkodierte URLs, manuelles Verwalten von Route-Parametern und das händische Nachziehen von Backend-Änderungen entfallen komplett.
Wayfinder ist im Beta (aktuell v0.1.x). Bis zum v1.0.0-Release kann sich die API noch ändern. Alle relevanten Änderungen werden im CHANGELOG protokolliert.
Ziggy ist ein Route-Helper, der über Jahre im Laravel-Ökosystem verbreitet war. Er stellt Laravel-Routen JavaScript-seitig bereit und erzeugt URLs in der Form route('posts.show', { id: 1 }).
Da Ziggy Route-Namen und Parameter als Strings behandelt, gab es Grenzen für TypeScript. Tippfehler in Route-Namen oder falsche Parameternamen fielen erst zur Laufzeit auf.Wayfinder ist TypeScript-first und erzeugt Controller-Methoden als importierbare Funktionen.
Vergleichspunkt
Ziggy
Wayfinder
Route-Referenzierung
route('posts.show', { id: 1 })
import { show } from "@/actions/..."
Typsicherheit
eingeschränkte Typdefinitionen
vollständige TypeScript-Typen
IDE-Support
schwache Vervollständigung
volle Vervollständigung und Typprüfung
Tree-Shaking
alle Routen ins Bundle
nur genutzte Routen im Bundle
Zeitpunkt der Erzeugung
Laufzeit-Injektion
statisch zur Buildzeit
In den Inertia-basierten Laravel-Starterkits (React, Vue, Svelte) ist Wayfinder standardmäßig aktiv.
Da die erzeugten Dateien bei jedem Build vollständig neu erzeugt werden, empfehlen wir, sie in .gitignore einzutragen. Schließen Sie die drei Verzeichnisse wayfinder, actions und routes gemeinsam aus.
Zum Ändern des Ausgabepfads verwenden Sie die Option --path.
Sie können auch den gesamten Controller importieren und Methoden darauf aufrufen.
import PostController from "@/actions/App/Http/Controllers/PostController";PostController.show(1);PostController.index();
Beim Import des gesamten Controllers greift Tree-Shaking nicht, und alle Actions landen im Bundle. Einzelimporte halten die finale Bundle-Größe kleiner.
Kombiniert mit den Formular-Helpern von Inertia versenden Sie Formulare, ohne einen einzigen URL-String zu schreiben.
import { useForm } from "@inertiajs/react";import { store } from "@/actions/App/Http/Controllers/PostController";const form = useForm({ name: "My Post" });form.submit(store()); // Sendet POST /posts
Auch mit der Link-Komponente funktioniert es analog.
import { Link } from "@inertiajs/react";import { show } from "@/actions/App/Http/Controllers/PostController";const Nav = () => ( <Link href={show(1)}>Beitrag ansehen</Link>);
Wenn Sie mit laravel new ein neues Projekt anlegen und React, Vue oder Svelte wählen, erhalten Sie eine Konfiguration, in der Wayfinder automatisch eingerichtet ist. Das Starterkit enthält:
Composer-Paket laravel/wayfinder
NPM-Paket @laravel/vite-plugin-wayfinder
Plugin-Konfiguration in vite.config.js
Eintrag der generierten Verzeichnisse in .gitignore
Auch die manuelle Einführung in bestehende Projekte ist mit obigen Schritten möglich.
Für Controller-Methoden mit dem Namen eines JavaScript-Schlüsselworts (z. B. delete, import) wird das Suffix Method angehängt.
// Wenn der Controller eine delete-Methode besitztimport { deleteMethod } from "@/actions/App/Http/Controllers/PostController";deleteMethod(1); // { url: "/posts/1", method: "delete" }
Laravel Wayfinder ist die TypeScript-first-Neukonzeption der Ziggy-Funktionalität „Laravel-Routen aus JavaScript nutzen”. Der Import erzeugter Funktionen bringt bei Typsicherheit, IDE-Support und Tree-Shaking erhebliche Vorteile.Bereits v0.1.x ermöglicht typsichere Referenzen auf Routen und Controller-Actions und ist Standardteil der Inertia-basierten Laravel-Starterkits. Die im next-Branch entwickelte nächste Version wird zu einem umfassenderen Typ-Fundament ausgebaut, das FormRequests, Eloquent-Modelle, Enums und Inertia-Page-Props als TypeScript erzeugt.
GitHub-Repository Laravel Wayfinder
Quellcode, CHANGELOG und Issues finden Sie hier.
Vite Plugin Wayfinder
Details zu den Konfigurationsoptionen des Vite-Plugins.