Wayfinder

Overview Hard-coding URLs in your frontend components is a fragile practice. When a route changes in your Laravel backend, your Vue or React components break silently. Laravel Wayfinder solves this by generating TypeScript functions for your routes. This gives you autocomplete, type checking, and instant feedback directly in your frontend IDE, ensuring your application remains perfectly in sync. Prerequisites To get the most out of this guide, you should be comfortable with: - Laravel basics (Routing and Controllers) - Modern frontend development (Vite and TypeScript) - Inertia.js (helpful but not strictly required) Key Libraries & Tools - **Laravel Wayfinder**: The core package that maps backend routes to frontend assets. - **Artisan**: The Laravel CLI used to trigger the generation process. - **Vite**: Can be configured to automate route regeneration during development. Code Walkthrough 1. Generating Route Definitions Run the generator command to scan your `routes/web.php` file and create the necessary TypeScript files. ```bash php artisan wayfinder:generate ``` This creates an `actions` and `routes` directory inside `resources/js`. These directories contain functions mapped to your controllers and named routes. 2. Implementing in a Component Instead of passing a string like `"/demo/show"` to a link, import the generated helper function. Wayfinder provides an object containing both the `url` and the HTTP `method`. ```typescript import { show } from '@/actions/Http/Controllers/DemoMethodController'; // Use directly with Inertia Link <Link :href="show().url">View Details</Link> ``` 3. Using Named Routes and Invocable Controllers Wayfinder handles all route types. For named routes, it nests helpers based on the dot-notation name. ```typescript import { named } from '@/routes/demo'; const routeData = named(); // Returns { url: '/demo/named', method: 'GET' } ``` Syntax Notes Wayfinder uses a **namespaced directory structure** for actions. If your controller lives in `App\Http\Controllers\Api`, your TypeScript import will mirror that path. This makes finding the correct route helper intuitive for anyone familiar with the backend structure. Practical Examples - **Dynamic Navigation**: Generate a sidebar menu where links are automatically updated if the backend URI changes. - **Form Submissions**: Use the `.method` property from the helper to ensure your frontend `axios` or `fetch` calls always use the correct HTTP verb (POST vs PUT) defined in Laravel. Tips & Gotchas - **Automate with Vite**: Add the Wayfinder plugin to your `vite.config.js` so that routes regenerate every time you save a PHP file. - **Inertia Compatibility**: When using Inertia.js, you can often pass the entire Wayfinder object to the `Link` component, and it will automatically extract the URL.