Laravel Wayfinder Integration with Vue & React: Boost Your SPA Development

If you've ever struggled with maintaining consistency between your Laravel backend routes and your JavaScript/TypeScript frontend, Laravel Wayfinder is here to revolutionize your workflow. This powerful package generates type-safe route URLs directly from your Laravel routes, eliminating hardcoded URLs and ensuring your frontend and backend stay perfectly in sync. Let’s dive into how to set it up!

What is Laravel Wayfinder?

Laravel Wayfinder automatically generates TypeScript definitions for your Laravel routes, enabling you to:

• Reference routes by their controller methods instead of manual URLs.
• Leverage type safety and autocompletion in your IDE.
• Automatically regenerate routes when your code changes (via Vite integration).
• Eliminate route naming conflicts with a structured approach.

Step 1: Install the Package

composer require laravel/wayfinder

This installs the core Wayfinder package, which provides the Artisan commands needed to generate route definitions.

Step 2: Set Up Vite Integration

To auto-regenerate routes during development or builds, install the vite-plugin-run:

npm i -D vite-plugin-run

Then update your vite.config.js:

import { defineConfig } from 'vite';
import { run } from "vite-plugin-run";
export default defineConfig({
    plugins: [
        // ... other plugins
        run([
            {
                name: "wayfinder",
                run: ["php", "artisan", "wayfinder:generate"],
                pattern: ["routes/**/*.php", "app/**/Http/**/*.php"],
            },
        ]),
    ],
});

What this does:

• Watches changes to your route files and controllers.
• Automatically runs php artisan wayfinder:generate when changes are detected.

Step 3: Generate TypeScript Definitions

Run the Artisan command to generate your initial route definitions:

php artisan wayfinder:generate

This creates a TypeScript file (e.g., resources/js/actions/App/Http/Controllers/PostController.ts) with type-safe methods for your routes.

Step 4: Define Your Laravel Route

In routes/web.php:

use App\Http\Controllers\PostController;
// Matches the controller's show method
Route::get('posts/{post}', [PostController::class, 'show']);

Step 5: Implement the Controller Method

In app/Http/Controllers/PostController.php:

public function show(Post $post)
{
    return $post; // Example: Return a Post model
}

Step 6: Use Routes in Your Frontend

Import the generated route function and use it in React, Vue, or any JS/TS file:

// Vue/React Component Example
import { show } from '@/actions/App/Http/Controllers/PostController';
// Get the URL for a specific post
const postUrl = show(1).url; // Output: "/posts/1"
const method = show(1).method; // Output: "get"

In a Vue Template (using Inertia.js or similar):

<template>
  <Link :href="show(1).url">View Post</Link>
</template>

Bonus: Named Routes

If you prefer using named routes, define them in your route files:

// routes/web.php
Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show');

Then import them from the generated routes file:

import { posts } from '@/routes';
// Use the named route
const url = posts.show(1).url; // "/posts/1"

Why Use Wayfinder?

• Type Safety: Catch invalid parameter types at compile time.
• Zero Hardcoding: Change a route URI once, and your frontend updates automatically.
• IDE Autocompletion: Discover routes and parameters effortlessly.
• Framework Agnostic: Works with React, Vue, Svelte, or plain JavaScript.

Final Thoughts

Laravel Wayfinder bridges the gap between your Laravel backend and JavaScript frontend, making route management effortless and type-safe. By automating route generation, you’ll reduce errors and spend less time debugging mismatched URLs. Give it a try and let your codebase breathe easier!

Learn More:

• Laravel Wayfinder GitHub
• Vite Plugin Run Documentation

Happy Coding! 😊