Laravel Wayfinder Public Beta

The Laravel team released the first beta of Laravel Wayfinder, a new first-party package that bridges your routes between the frontend and backend:

Laravel Wayfinder bridges your Laravel backend and TypeScript frontend with zero friction. It automatically generates fully-typed, importable TypeScript functions for your controllers and routes — so you can call your Laravel endpoints directly in your client code just like any other function. No more hardcoding URLs, guessing route parameters, or syncing backend changes manually.

Wayfinder generates TypeScript definitions for your routes and controller methods using the provided Artisan command: php artisan wayfinder:generate. You can also configure Vite to run the wayfinder:generate command when your routes and controller files change so that the frontend representation is always up to date.

Once you've generated the TypeScript definitions, you can use them to resolve the URL and HTTP method:

import { show } from "@actions/App/Http/Controllers/PostController";
 
show(1); // { url: "/posts/1", method: "get" }
 
// Invokable controllers
import StorePostController from "@actions/App/Http/Controllers/StorePostController";
 
StorePostController();
 
// Controller methods
import PostController from "@actions/App/Http/Controllers/PostController";
 
PostController.show(1);
 
// Named routes
import { show } from "@routes/post";
 
// Named route is `post.show`...
show(1); // { url: "/posts/1", method: "get" }

Another impressive feature is the seamless integration of Wayfinder with Intertia and useForm. Just pass the object into the form's submit() method, and it automatically knows the URL and request method:

import { useForm } from "@inertiajs/react";
import { store } from "@actions/App/Http/Controllers/PostController";
 
const form = useForm({
    name: "My Big Post",
});
 
form.submit(store()); // Will POST to `/posts`...

#Main Features

• Automatic TypeScript function generation: Generates fully-typed, importable TypeScript functions for Laravel controllers and routes.

• Simplified frontend route usage: Wayfinder eliminates the need for hardcoding URLs or manually syncing backend changes, streamlining the process of consuming Laravel routes on the front end.
• Flexible implementation: Wayfinder works seamlessly with Inertia or conventional forms.
• Integration with Vite: Integrates with Vite and supports automatic watching of files for changes
• Customizable generation paths: This option allows you to configure the base path for generated TypeScript definitions, providing flexibility in organizing frontend assets.

#Learn More

Wayfinder is in early public beta at the time of writing. You can expect API changes leading up to the stable v1.0 launch which are tracked in the project's changelog. You can learn more about this package, get full installation instructions, and view the source code on GitHub at laravel/wayfinder.