Wayfinder Development
When to Apply
Activate whenever referencing backend routes in frontend components:
- Importing from
@/actions/or@/routes/ - Calling Laravel routes from TypeScript/JavaScript
- Creating links or navigation to backend endpoints
Documentation
Use search-docs for detailed Wayfinder patterns and documentation.
Quick Reference
Generate Routes
Run after route changes if Vite plugin isn't installed:
php artisan wayfinder:generate --no-interaction
For form helpers, use --with-form flag:
php artisan wayfinder:generate --with-form --no-interaction
Import Patterns
<code-snippet name="Controller Action Imports" lang="typescript">// Named imports for tree-shaking (preferred)... import { show, store, update } from '@/actions/App/Http/Controllers/PostController'
// Named route imports... import { show as postShow } from '@/routes/post'
</code-snippet>Common Methods
<code-snippet name="Wayfinder Methods" lang="typescript">// Get route object... show(1) // { url: "/posts/1", method: "get" }
// Get URL string... show.url(1) // "/posts/1"
// Specific HTTP methods... show.get(1) store.post() update.patch(1) destroy.delete(1)
// Form attributes for HTML forms... store.form() // { action: "/posts", method: "post" }
// Query parameters... show(1, { query: { page: 1 } }) // "/posts/1?page=1"
</code-snippet>Wayfinder + Inertia
Use Wayfinder with the <Form> component:
<code-snippet name="Wayfinder Form (Vue)" lang="vue">
Verification
- Run
php artisan wayfinder:generateto regenerate routes if Vite plugin isn't installed - Check TypeScript imports resolve correctly
- Verify route URLs match expected paths
Common Pitfalls
- Using default imports instead of named imports (breaks tree-shaking)
- Forgetting to regenerate after route changes
- Not using type-safe parameter objects for route model binding
