mcpField
W
wayfinder

wayfinder

github.com/markhamsquareventuresDevelopment046 installsUpdated 42w ago
Repository

About wayfinder

Wayfinder generates TypeScript functions and types for Laravel routes and controllers, for teams linking backend routing with client-side code. It provides typed route calls and keeps generated helpers synchronized with route definitions.

Key features

  1. 01Typed TypeScript route functions
  2. 02Controller and named-route imports
  3. 03HTTP method and URL helpers
  4. 04Route parameter and query handling
  5. 05HTML form attribute generation

Use cases

  1. 01Call Laravel routes from client-side code
  2. 02Build forms with route-derived actions and methods
  3. 03Keep frontend route calls aligned after route changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/markhamsquareventures/essentials --skill wayfinder

After installing, type/wayfinderin Claude Code to confirm it loaded.

Details

From the project README

Wayfinder

Instructions

Wayfinder generates TypeScript functions and types for Laravel controllers and routes which you can import into your client side code. It provides type safety and automatic synchronization between backend routes and frontend code.

Development Guidelines
  • Always Prefer named imports for tree-shaking (e.g., import { show } from '@/actions/...')
  • Avoid default controller imports (prevents tree-shaking)
  • Run php artisan wayfinder:generate after route changes if there are any errors
Feature Overview
  • Form Support: Use .form() with --with-form flag for HTML form attributes — <form {...store.form()}> → action="/posts" method="post"
  • HTTP Methods: Call .get(), .post(), .patch(), .put(), .delete() for specific methods — show.head(1) → { url: "/posts/1", method: "head" }
  • Invokable Controllers: Import and invoke directly as functions. For example, import StorePost from '@/actions/.../StorePostController'; StorePost()
  • Named Routes: Import from @/routes/ for non-controller routes. For example, import { show } from '@/routes/post'; show(1) for route name post.show
  • Parameter Binding: Detects route keys (e.g., {post:slug}) and accepts matching object properties — show("my-post") or show({ slug: "my-post" })
  • Query Merging: Use mergeQuery to merge with window.location.search, set values to null to remove — show(1, { mergeQuery: { page: 2, sort: null } })
  • Query Parameters: Pass { query: {...} } in options to append params — show(1, { query: { page: 1 } }) → "/posts/1?page=1"
  • Route Objects: Functions return { url, method } shaped objects — show(1) → { url: "/posts/1", method: "get" }
  • URL Extraction: Use .url() to get URL string — show.url(1) → "/posts/1"

Examples

// Import controller methods (tree-shakable) import { show, store, update } from '@/actions/App/Http/Controllers/PostController' 
// Get route object with URL and method...
show(1) // { url: "/posts/1", method: "get" }

// Get just the URL...
show.url(1) // "/posts/1"

// Use specific HTTP methods...
show.get(1) // { url: "/posts/1", method: "get" }
show.head(1) // { url: "/posts/1", method: "head" }

// Import named routes...
import { show as postShow } from '@/routes/post' // For route name 'post.show'
postShow(1) // { url: "/posts/1", method: "get" }
Wayfinder + Inertia

If your application uses the <Form> component from Inertia, you can use Wayfinder to generate form action and method automatically.

Comments

Markdown supported