# Francoism90 Stry Wayfinder Development

> Wayfinder Development

- Skill: `tomevault-io/francoism90-stry-wayfinder-development` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/francoism90-stry-wayfinder-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/francoism90-stry-wayfinder-development/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/francoism90-stry-wayfinder-development

---


# 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">

<Form v-bind="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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/francoism90) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-12 -->