89 lines
2.2 KiB
Markdown
89 lines
2.2 KiB
Markdown
---
|
|
name: wayfinder-development
|
|
description: >-
|
|
Activates whenever referencing backend routes in frontend components. Use when
|
|
importing from @/actions or @/routes, calling Laravel routes from TypeScript,
|
|
or working with Wayfinder route functions.
|
|
---
|
|
|
|
# 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 (React)" lang="typescript">
|
|
|
|
<Form {...store.form()}><input name="title" /></Form>
|
|
|
|
</code-snippet>
|
|
|
|
## Verification
|
|
|
|
1. Run `php artisan wayfinder:generate` to regenerate routes if Vite plugin isn't installed
|
|
2. Check TypeScript imports resolve correctly
|
|
3. 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 |