Use your Laravel routes in JavaScript

Ziggy provides a JavaScript route() helper that works like Laravel’s, making it a breeze to use your named Laravel routes in JavaScript.

Ziggy

Use your Laravel named routes in JavaScript with a seamless route() helper function.

Get Started

View on GitHub

Why Ziggy?

Ziggy creates a JavaScript route() helper function that works like Laravel’s route() helper, allowing you to use your Laravel named routes in JavaScript just as easily as you do in PHP.

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

// In your JavaScript
route('posts.show', 1); // 'https://ziggy.test/posts/1'

Installation

Install Ziggy via Composer and get started in minutes

Quickstart

Learn the basics and start using Ziggy in your app

TypeScript Support

Auto-generate types for route names and parameters

Framework Integration

Use with Vue, React, or any JavaScript framework

Key Features

Route Helper

JavaScript route() function that mirrors Laravel’s PHP helper

Route Model Binding

Full support for Laravel’s route-model binding with custom keys

TypeScript Ready

Generate type definitions for route autocompletion

Vue Plugin

Built-in Vue plugin for seamless integration

React Hook

useRoute() hook for React applications

Route Filtering

Control which routes are exposed to JavaScript

Quick Example

// Basic usage
route('posts.index'); // 'https://ziggy.test/posts'

// With parameters
route('posts.show', 1); // 'https://ziggy.test/posts/1'

// With query parameters
route('posts.index', { page: 2, sort: 'date' }); 
// 'https://ziggy.test/posts?page=2&sort=date'

// Check current route
route().current('posts.index'); // true/false

// Get current route name
route().current(); // 'posts.index'

Getting Started

1. Install Ziggy

   Add Ziggy to your Laravel application via Composer

   composer require tightenco/ziggy
   
2. Add the Blade directive

   Include the @routes directive in your main layout before your JavaScript

   @routes
   <script src="/js/app.js"></script>
   
3. Use the route() helper

   Start using the route() function in your JavaScript

   route('posts.show', { post: 1 });
   

Community

Ziggy is built and maintained by Tighten, a team dedicated to making Laravel development better. Join thousands of developers using Ziggy in production.

GitHub

View source code, report issues, and contribute

npm Package

Available as ziggy-js on npm