PHPackages                             rzl-zone/ziggy-route - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. rzl-zone/ziggy-route

ActiveLibrary

rzl-zone/ziggy-route
====================

Generates a Blade directive exporting all of your named Laravel routes. Also provides a nice route() helper function in JavaScript.

v0.0.15(5mo ago)219MITTypeScriptPHP >=8.1CI passing

Since Aug 7Pushed 5mo agoCompare

[ Source](https://github.com/rzl-zone/ziggy-route)[ Packagist](https://packagist.org/packages/rzl-zone/ziggy-route)[ Docs](https://github.com/rzl-zone/ziggy-route)[ RSS](/packages/rzl-zone-ziggy-route/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (16)Used By (0)

 [ ![RzlZone Logo](https://raw.githubusercontent.com/rzl-zone/ziggy-route/main/logo-circle.png) ](https://raw.githubusercontent.com/rzl-zone/ziggy-route/main/logo-circle.png)

**Ziggy Route**
===============

[](#ziggy-route)

  *Fully-Typed [`Laravel`](https://laravel.com) Route Generator for JS/TS.*
 ***Ziggy Route** is a customized fork of [`Ziggy`](https://github.com/tighten/ziggy) that provides a fully-typed JavaScript `route()` function mimicking Laravel's routing, with additional features such as extended config handling and attribute stubs.*
 ***Customization with ❤️ by [@rzl-zone](https://github.com/rzl-zone).***

 [ ![Latest Version on Packagist](https://camo.githubusercontent.com/bf0833c7ce7beb8aa6ac92007fa05f7ed2921068c0d73370c89449ac19cc0131/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f727a6c2d7a6f6e652f7a696767792d726f7574652e7376673f6c6f676f3d7061636b6167697374266c6162656c3d4c617465737425323056657273696f6e2532305061636b616769737426636f6c6f723d726564266c6f676f436f6c6f723d7768697465267374796c653d666c61742d726f756e646564) ](https://packagist.org/packages/rzl-zone/ziggy-route) [ ![Latest Version on Packagist](https://camo.githubusercontent.com/7983810b192d7a31f98bcc058be48ec4cb60d78f192090dfbf892d050be3370a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f727a6c2d7a6f6e652f7a696767792d726f7574652e7376673f6c6f676f3d7061636b6167697374266c6162656c3d5765656b6c79253230446f776e6c6f6164732532305061636b616769737426636f6c6f723d6f72616e6765266c6f676f436f6c6f723d7768697465267374796c653d666c61742d726f756e646564) ](https://packagist.org/packages/rzl-zone/ziggy-route) [ ![Latest Version on NPM](https://camo.githubusercontent.com/4445c5abddeca147814a46b19b0603904bab1ae92d3fe10c9a98bde358ecc443/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40727a6c2d7a6f6e652f7a696767792d726f7574653f6c6f676f3d6e706d266c6162656c3d4c617465737425323056657273696f6e2532304e504d26636f6c6f723d344341463530266c6f676f436f6c6f723d434233383337267374796c653d666c61742d726f756e646564) ](https://npmjs.com/package/@rzl-zone/ziggy-route) [ ![NPM Total Downloads](https://camo.githubusercontent.com/ab100b0470e6a1ed53b1cac448e7e9f4d6c2bf8067166e98904e7994d18c0abf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f40727a6c2d7a6f6e652f7a696767792d726f7574653f6c6f676f3d6e706d266c6162656c3d546f74616c253230446f776e6c6f6164732532304e504d26636f6c6f723d303037454336266c6f676f436f6c6f723d434233383337267374796c653d666c61742d726f756e646564) ](https://npmjs.com/package/@rzl-zone/ziggy-route) [ ![NPM Weekly Downloads](https://camo.githubusercontent.com/e74edc59c6fdab65db5003ccf943baa9cb173c7f542c5782d8eace01f0c53060/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64772f40727a6c2d7a6f6e652f7a696767792d726f7574653f6c6f676f3d6e706d266c6162656c3d5765656b6c79253230446f776e6c6f6164732532304e504d26636f6c6f723d434233383337266c6f676f436f6c6f723d434233383337267374796c653d666c61742d726f756e646564) ](https://npmjs.com/package/@rzl-zone/ziggy-route) [ ![PRs Welcome](https://camo.githubusercontent.com/79e4555dcaab62b8278f31663550e8eae7beeba36c319425b486cafc585aafbd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5052732d57656c636f6d652d627269676874677265656e2e7376673f636f6c6f723d323841373435) ](https://github.com/rzl-zone/ziggy-route/blob/main/CONTRIBUTING.md) [ ![GitHub license](https://camo.githubusercontent.com/0faf31df4337d42f0b448d3648e104f5d58fc06198f436ec398553ad3baa3789/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c75652e7376673f636f6c6f723d334441363339) ](https://github.com/rzl-zone/ziggy-route/blob/main/LICENSE.md) [ ![GitHub](https://camo.githubusercontent.com/1dba6e891ef316b228e5e24b9f09c9c78891d3c07a3aeb01045b0b95085c94aa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5265706f2d6f6e2532304769744875622d3138313731373f6c6f676f3d676974687562) ](https://github.com/rzl-zone/ziggy-route) [ ![Repo on GitHub](https://camo.githubusercontent.com/7875de22fb0f9a2d8b1b6b1007979324c9d0e5d28f5f8942dc04f19444334358/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4f72672d727a6c2d2d7a6f6e652d3234323932653f6c6f676f3d676974687562267374796c653d666c61742d726f756e646564) ](https://github.com/orgs/rzl-zone/repositories)

This package is **not officially maintained by Tighten**.

It is framework-agnostic and can be used with **Vue**, **React**, **Vanilla JS**, and other JavaScript-based frontends that rely on Laravel's routing system.

> ⚡️ Includes a Vite plugin for auto-generating route definitions on the fly from Laravel!

---

- [**Installation**](#installation)
- [**Usage**](#usage)
    - [`route()` function](#route-function)
    - [`Router` class](#router-class)
    - [Route-model binding](#route-model-binding)
    - [TypeScript Support](#typescript-support)
- [**JavaScript frameworks**](#javascript-frameworks)
    - [Generating and importing Rzl Ziggy-Route configuration](#generating-and-importing-rzl-ziggy-route-configuration)
    - [Importing the `route()` function](#importing-the-route-function)
    - [Vue](#vue)
    - [React](#react)
    - [SPAs or separate repos](#spas-or-separate-repos)
- [**Publish Config File**](#publish-config-file)
- [**Filtering Routes**](#filtering-routes)
    - [Including/excluding routes](#includingexcluding-routes)
    - [Filtering with groups](#filtering-with-groups)
- [**Default Parameter Values**](#default-parameter-values)
- [**Routes File Generator**](#routes-file-generator)
    - [Using JavaScript/TypeScript](#using-javascript-or-typescript)
    - [Output Name File And Path To Generate](#output-name-file-and-path-to-generate)
- [**Automatically Regenerates File Routes**](#automatically-regenerates-file-routes)
- [**Other**](#other)
- [**Contributing**](#contributing)

---

Installation
------------

[](#installation)

Install Rzl Ziggy-Route in your Laravel backend with Composer:

```
composer require rzl-zone/ziggy-route
```

Install Rzl Ziggy-Route in your frontend or SPA with NPM, PNPM or YARN:

```
npm i @rzl-zone/ziggy-route
# or
pnpm add @rzl-zone/ziggy-route
# or
yarn add @rzl-zone/ziggy-route
```

Add the ***`@rzlRoutes`*** Blade directive to your main layout (*before* your application's JavaScript), and the `route()` helper function will be available globally!

> By default, the output of the `@rzlRoutes` Blade directive includes a list of all your application's routes and their parameters. This route list is included in the HTML of the page and can be viewed by end users. To configure which routes are included in this list, or to show and hide different routes on different pages, see [Filtering Routes](#filtering-routes).

---

Usage
-----

[](#usage)

### `route()` function

[](#route-function)

Rzl Ziggy-Route `route()` function works like [Laravel's `route()` helper](https://laravel.com/docs/helpers#method-route)—you can pass it the name of a route, and the parameters you want to pass to the route, and it will generate a URL.

#### Basic usage

[](#basic-usage)

```
Route::get("posts", fn (Request $request) => /* ... */)->name("posts.index");
```

```
route("posts.index");
// ➔ "/posts"
route("posts.index", {}, true);
// ➔ "https://rzl.test/posts"
route("posts.index", null, true);
// ➔ "https://rzl.test/posts"
route("posts.index", undefined, true);
// ➔ "https://rzl.test/posts"
```

#### Absolute URL

[](#absolute-url)

The third argument determines whether the generated URL should include the origin. By default, it is false, meaning the URL will be returned without the origin. To include the origin in the result, simply pass true as the third argument.

> ⚠️ Passing a non-boolean value except null or undefined as the third argument will throw an error.

```
route("posts.index");
// ➔ "/posts"
route("posts.index", {}, false);
// ➔ "/posts"
route("posts.index", null, true);
// ➔ "https://rzl.test/posts"
route("posts.index", undefined, true);
// ➔ "https://rzl.test/posts"
```

> ⚠️ Passing a non-boolean value like null or undefined as the third argument will force to false.

```
route("posts.index", {}, null);
// ➔ "/posts"
route("posts.index", {}, undefined);
// ➔ "/posts"
route("posts.index", null, undefined);
// ➔ "/posts"
route("posts.index", undefined, undefined);
// ➔ "/posts"
```

#### Parameters

[](#parameters)

```
Route::get("posts/{post}", fn (Post $post) => /* ... */)->name("posts.show");
```

```
route("posts.show", [1], true);
// ➔ "https://rzl.test/posts/1"
route("posts.show", [1]);
// ➔ "/posts/1"
route("posts.show", [{}]);
// ➔  Error.
// Error: Object passed as "post" parameter is missing route model binding key "undefined".
// The first parameter (index 0) is must be passed as route parameters, e.g., { post }.

route("posts.show", [1, { other: "test" }]);
// ➔ "/posts/1?other=test"
route("posts.show", { post: 1 });
// ➔ "/posts/1"
```

> ⚠️ Warning: Unknown route parameters in Laravel will be appended as query strings with empty values.

```
route("posts.show", [1, "unknown-route-params"]);
// ➔ "/posts/1?unknown-route-params="
```

#### Multiple parameters

[](#multiple-parameters)

```
Route::get("venues/{venue}/events/{event}", fn (Venue $venue, Event $event) => /* ... */)->name("venues.events.show");
```

```
route("venues.events.show", [1, 2], true);
// ➔ "https://rzl.test/venues/1/events/2"
route("venues.events.show", [1, 2]);
// ➔ "/venues/1/events/2"
route("venues.events.show", [1, 2, { other: "test" }]);
// ➔ "/venues/1/events/2?other=test"
route("venues.events.show", [1, {}]);
// ➔ Error.
// Error: Object passed as "event" parameter is missing route model binding key "undefined".
// The second parameter (index 1) is must be passed as route parameters, e.g., { event }.

route("venues.events.show", { venue: 1, event: 2 });
// ➔ "/venues/1/events/2"
```

> ⚠️ Warning: Unknown route parameters in Laravel will be appended as query strings with empty values.

```
route("venues.events.show", [1, 2, "unknown-route-params"]);
// ➔ "/venues/1/events/2?unknown-route-params="
```

#### Query parameters

[](#query-parameters)

Rzl Ziggy adds arguments that don't match any named route parameters as query parameters:

```
Route::get("venues/{venue}/events/{event}", fn (Venue $venue, Event $event) => /* ... */)->name("venues.events.show");
```

```
route("venues.events.show", {
    venue: 1,
    event: 2,
    page: 5,
    count: 10,
});
// ➔ "/venues/1/events/2?page=5&count=10"
route("venues.events.show", {
    venue: 1,
    event: 2,
    page: 5,
    count: 10,
    type: "active"
}, true);
// ➔ "https://rzl.test/venues/1/events/2?page=5&count=10&type=active"
```

If you need to pass a query parameter with the same name as a route parameter, nest it under the special `_query` key:

```
route("venues.events.show", {
    venue: 1,
    event: 2,
    _query: {
        event: 3,
        page: 5,
    },
});
// ➔ "/venues/1/events/2?event=3&page=5"
route("venues.events.show", {
    venue: 1,
    event: 2,
    type: "disable"
    _query: {
        event: 3,
        page: 5,
        type: "active",
    },
}, true);
// ➔ "https://rzl.test/venues/1/events/2?event=3&page=5&type=active"
```

Like Laravel, Rzl Ziggy automatically encodes boolean query parameters as integers in the query string:

```
route("venues.events.show", {
    venue: 1,
    event: 2,
    _query: {
        draft: false,
        overdue: true,
    },
}, true);
// ➔ "https://rzl.test/venues/1/events/2?draft=0&overdue=1"
route("venues.events.show", {
    venue: 1,
    event: 2,
    active: true,
    _query: {
        draft: false,
        overdue: true,
    },
});
// ➔ "/venues/1/events/2?active=1&draft=0&overdue=1"
```

- #### Usage at JS/TS example:

    [](#usage-at-jsts-example)

```
route("posts.show", { post: 5, type: "active" });
// ➔ "/de/posts/5?type=active"
route("posts.show", { post: 1 }, true);
// ➔ "https://rzl.test/de/posts/1"
route("posts.show", { post: 1, locale:"ar" });
// ➔ "/ar/posts/1"
route("posts.show", { post: 1, locale:"en" }, true);
// ➔ "https://rzl.test/en/posts/1"
```

#### Examples

[](#examples)

HTTP request with `axios`:

```
const post = { id: 1, title: "Rzl Ziggy Stardust" };

return axios.get(route("posts.show", post)).then((response) => response.data);
```

---

### ⚠️ Warning: Calling `route()` Without Arguments

[](#️-warning-calling-route-without-arguments)

- #### Calling `route()` without a name (or with undefined / null) can cause runtime errors when used in a string context.

    [](#calling-route-without-a-name-or-with-undefined--null-can-cause-runtime-errors-when-used-in-a-string-context)

    ❌ Incorrect usage:

    ```
    href={route()}
    console.log(`${route()}`)
    route(null)
    route(undefined)
    ```

    These patterns may throw an error, such as:

    ```
    - `Uncaught TypeError: can't access property "toString", x is undefined.`

    - `Rzl-Ziggy Error: Function 'route()' was implicitly coerced to a primitive without a name.`

    - `Rzl-Ziggy Error: Function route() was called without a name and used as a string. Pass a valid route name, or use route().current() to get the current route name, or...`

    - `Rzl-Ziggy Error: route() was called without a route name and then implicitly converted to a string. This typically happens when route() is used in a string context...`
    ```

    > ⚠️ The actual error message may vary depending on your environment or build process, but it typically happens because `route()` without a name returns an object that can't be coerced to a string.

    ✅ Correct usage:

    ```
    route("events.index");
    route().params;
    route().queryParams;
    route().routeParams;
    route().current();
    route().has("route.name");
    ```

    > 💡 To safely introspect the current route, use route() as an object:
    >
    >
    > - [route().current()](#check-the-current-route-routecurrent)
    > - [route().has("route.name")](#check-if-a-route-exists-routehas)
    > - [route().params](#retrieve-the-current-route-params-routeparams)
    > - [route().queryParams](#retrieve-all-search-query-params-only-except-params-route-in-laravel-route-in-the-current-route-routequeryparams)
    > - [route().routeParams](#retrieve-only-params-route-in-laravel-route-except-query-search-params-in-the-current-route-routerouteparams)

---

### `Router` class

[](#router-class)

Calling Rzl Ziggy-Route `route()` function with no arguments will return an instance of its JavaScript `Router` class, which has some other useful properties and methods.

#### Check the current route: `route().current()`

[](#check-the-current-route-routecurrent)

```
// Laravel route called "events.index" with URI "/events"
// Current window URL is https://rzl.test/events

route().current();
// ➔ "events.index"
route().current("events.index");
// ➔ true
route().current("events.*");
// ➔ true
route().current("events.show");
// ➔ false
```

#### `route().current(...)` optionally accepts parameters as its second argument, and will check that their values also match in the current URL:

[](#routecurrent-optionally-accepts-parameters-as-its-second-argument-and-will-check-that-their-values-also-match-in-the-current-url)

```
// Laravel route called "venues.events.show" with URI "/venues/{venue}/events/{event}"
// Current window URL is https://myapp.com/venues/1/events/2?hosts=all

route().current("venues.events.show", [1]);
// ➔ true
route().current("venues.events.show", [6]);
// ➔ false
route().current("venues.events.show", [1, 5]);
// ➔ false
route().current("venues.events.show", [1, 2]);
// ➔ true
route().current("venues.events.show", [1, { hosts: "all" }]);
// ➔ Error
//* Error: Object passed as "event" parameter is missing route model binding key "undefined".
//* Error: (Cause array index 1 is must passing as routeParams, aka: {event}).

route().current("venues.events.show", [1, 2, { hosts: "all" }]);
// ➔ true
route().current("venues.events.show", [2, 2, { hosts: "all" }]);
// ➔ false
route().current("venues.events.show", [1, { hosts: "single" }]);
// ➔ Error
//* Error: Object passed as "event" parameter is missing route model binding key "undefined".
//* Error: (Cause array index 1 is must passing as routeParams, aka: {event}).

route().current("venues.events.show", [1, 5, { hosts: "single" }]);
// ➔ false
route().current("venues.events.show", [2, 2, { hosts: "all" }]);
// ➔ false
route().current("venues.events.show", { venue: 1 });
// ➔ true
route().current("venues.events.show", { venue: 1, event: 2 });
// ➔ true
route().current("venues.events.show", { hosts: "all" });
// ➔ true
route().current("venues.events.show", { venue: 6 });
// ➔ false
```

#### Check if a route exists: `route().has(...)`

[](#check-if-a-route-exists-routehas)

```
// Laravel app has only one named route, "home"

route().has("home");
// ➔ true
route().has("orders");
// ➔ false
```

#### Retrieve the current route params: `route().params`

[](#retrieve-the-current-route-params-routeparams)

```
// Laravel route called "venues.events.show" with URI "/venues/{venue}/events/{event}"
// Current window URL is https://myapp.com/venues/1/events/2?hosts=all

const test = route().params;
console.log(test)
// ➔ { venue: "1", event: "2", hosts: "all" }
console.log(test.venue)
// ➔ "1"
console.log(test.hosts)
// ➔ "all"
console.log(test.other)
// ➔ undefined
```

> Note: parameter values retrieved with `route().params` will always be returned as strings or undefined.

#### Retrieve only params route in laravel route (except query search params) in the current route: `route().routeParams`

[](#retrieve-only-params-route-in-laravel-route-except-query-search-params-in-the-current-route-routerouteparams)

```
// Laravel route called "venues.events.show" with URI "/venues/{venue}/events/{event}"
// Current window URL is https://myapp.com/venues/1/events/2?hosts=all&type=test

const test = route().routeParams;
console.log(test)
// ➔ { venue: "1", event: "2" }
console.log(test.venue)
// ➔ "1"
console.log(test.hosts)
// ➔ undefined
console.log(test.other)
// ➔ undefined
```

> Note: parameter values retrieved with `route().routeParams` will always be returned as strings or undefined.

#### Retrieve all search query params only (except params route in laravel route) in the current route: `route().queryParams`

[](#retrieve-all-search-query-params-only-except-params-route-in-laravel-route-in-the-current-route-routequeryparams)

```
// Laravel route called "venues.events.show" with URI "/venues/{venue}/events/{event}"
// Current window URL is https://myapp.com/venues/1/events/2?hosts=all&type=test

const test = route().queryParams;
console.log(test)
// ➔ { hosts: "all", type: "test" }
console.log(test.type)
// ➔ "test"
console.log(test.hosts)
// ➔ "all"
console.log(test.venue)
// ➔ undefined
console.log(test.other)
// ➔ undefined
```

> Note: parameter values retrieved with `route().queryParams` will always be returned as strings or undefined.

### Route-model binding

[](#route-model-binding)

Rzl Ziggy supports Laravel's [route-model binding](https://laravel.com/docs/routing#route-model-binding), and can even recognize custom route key names. If you pass `route()` a JavaScript object as a route parameter, Rzl Ziggy will use the registered route-model binding keys for that route to find the correct parameter value inside the object. If no route-model binding keys are explicitly registered for a parameter, Rzl Ziggy will use the object's `id` key.

```
// app/Models/Post.php

class Post extends Model
{
    public function getRouteKeyName()
    {
        return "slug";
    }
}
```

```
Route::get("blog/{post}", function (Post $post) {
    return view("posts.show", ["post" => $post]);
})->name("posts.show");
```

```
const post = {
    id: 3,
    title: "Introducing Rzl Ziggy v1",
    slug: "introducing-rzl-ziggy-v1",
    date: "2020-10-23T20:59:24.359278Z",
};

// Rzl Ziggy knows that this route uses the "slug" route-model binding key:

route("posts.show", post);
// ➔ "/blog/introducing-rzl-ziggy-v1"
route("posts.show", post, true);
// ➔ "https://rzl.test/blog/introducing-rzl-ziggy-v1"
```

Rzl Ziggy also supports [custom keys](https://laravel.com/docs/routing#customizing-the-key) for scoped bindings declared directly in a route definition:

```
Route::get("authors/{author}/photos/{photo:uuid}", fn (Author $author, Photo $photo) => /* ... */)
    ->name("authors.photos.show");
```

```
const photo = {
    uuid: "714b19e8-ac5e-4dab-99ba-34dc6fdd24a5",
    filename: "sunset.jpg",
}

route("authors.photos.show", [{ id: 1, name: "John" }, photo], true);
// ➔ "https://rzl.test/authors/1/photos/714b19e8-ac5e-4dab-99ba-34dc6fdd24a5"
```

### TypeScript Support

[](#typescript-support)

Rzl Ziggy includes TypeScript type definitions, and an Artisan command that can generate additional type definitions to enable route name and parameter autocompletion.

To generate route types, run the `rzl-ziggy:generate` command with the `--types` or `--types-only` option:

```
php artisan rzl-ziggy:generate --types
```

To make your IDE aware that Rzl Ziggy-Route `route()` helper is available globally, and to type it correctly, add a declaration like this in a `.d.ts` file somewhere in your project:

```
import { route as routeFn } from "@rzl-zone/ziggy-route";

declare global {
    var route: typeof routeFn;
}
```

If you don't have [Rzl Ziggy-Route NPM package installed](https://www.npmjs.com/package/@rzl-zone/ziggy-route), add the following to your `jsconfig.json` or `tsconfig.json` to load Rzl Ziggy-Route types from your vendor directory:

```
{
    "compilerOptions": {
        "paths": {
            "@rzl-zone/ziggy-route": ["./vendor/rzl-zone/ziggy-route"]
        }
    }
}
```

---

JavaScript frameworks
---------------------

[](#javascript-frameworks)

Note

Many applications don't need the additional setup described here—the `@rzlRoutes` Blade directive makes Rzl Ziggy-Route `route()` function and config available globally, including within bundled JavaScript files.

If you are not using the `@rzlRoutes` Blade directive, you can import Rzl Ziggy-Route `route()` function and configuration directly into JavaScript/TypeScript files.

### Generating and importing Rzl Ziggy-Route configuration

[](#generating-and-importing-rzl-ziggy-route-configuration)

Rzl Ziggy provides an Artisan command to output its config and routes to a file:

```
php artisan rzl-ziggy:generate
```

This command places your configuration in `resources/js/rzl-ziggy/routes/index.ts` by default, but you can customize this path by passing an argument to the Artisan command or setting in the laravel config file `rzl-ziggy.output.path.main` for name file [Output Name File And Path To Generate](#output-name-file-and-path-to-generate) and `rzl-ziggy.lang` valid value is (`ts` or `js`) [Using JavaScript or TypeScript](#using-javascript-or-typescript).

The file `rzl-ziggy:generate` creates looks something like this:

#### For TypeScript:

[](#for-typescript)

```
// resources/js/rzl-ziggy/routes/index.ts

/** ---------------------------------
  * * ***Generates files/routes of app based on Laravel route names.***
  * ---------------------------------
  *
  * **This behaves similarly to `rzl-ziggy:generate`.**
  *
  * _* **TypeScript (TS) Mode.**_
  */
export const appRoutes: string = `{
  "url": "https://rzl.test",
  "port": null,
  "routes": {
    "home": {
      "uri": "/",
      "methods": ["GET", "HEAD"],
      "domain": null
    },
    "login": {
      "uri": "login",
      "methods": ["GET", "HEAD"],
      "domain": null
    }
  }
}`;

```

#### For JavaScript:

[](#for-javascript)

```
// resources/js/rzl-ziggy/routes/index.js

/** ---------------------------------
  * * ***Generates files/routes of app based on Laravel route names.***
  * ---------------------------------
  *
  * **This behaves similarly to `rzl-ziggy:generate`.**
  *
  * _* **JavaScript (JS) Mode.**_
  */
export const appRoutes = `{
  "url": "https://rzl.test",
  "port": null,
  "routes": {
    "home": {
      "uri": "/",
      "methods": ["GET", "HEAD"],
      "domain": null
    },
    "login": {
      "uri": "login",
      "methods": ["GET", "HEAD"],
      "domain": null
    }
  }
}`;

```

### Importing the `route()` function

[](#importing-the-route-function)

You can import Rzl Ziggy like any other JavaScript library.
However, without the `@rzlRoutes` Blade directive, the route config (typically named `appRoutes`) is not available globally.

This means:

- You must manually pass the config to the `route()` function.
- Since `appRoutes` is a string, you need to parse it using `JSON.parse()` before passing it in.

> ℹ️ Path import `import { appRoutes } from "./rzl-ziggy/routes/index.js";` depend from your setting at config php file, see: [Output Name File And Path To Generate](#output-name-file-and-path-to-generate).

```
import { route } from "@rzl-zone/ziggy-route";
import { appRoutes } from "./rzl-ziggy/routes/index.js";

route("home", null, false, JSON.parse(appRoutes));
route("home", undefined, undefined, JSON.parse(appRoutes));
```

To simplify importing the `route()` function, you can create an alias to the vendor path:

```
// vite.config.js

export default defineConfig({
    resolve: {
        alias: {
            "@rzl-zone/ziggy-route": path.resolve("vendor/rzl-zone/ziggy-route"),
        },
    },
});
```

Now your imports can be shortened to:

```
import { route } from "@rzl-zone/ziggy-route";
```

### Vue

[](#vue)

Rzl Ziggy includes a Vue plugin to make it easy to use the `route()` helper throughout your Vue app:

```
import { createApp } from "vue";
import { rzlZiggyVue } from "@rzl-zone/ziggy-route/vue";
import App from "./App.vue";

createApp(App).use(rzlZiggyVue);
```

Now you can use the `route()` function anywhere in your Vue components and templates:

```
Home
```

With `` in Vue 3 you can use `inject` to make the `route()` function available in your component script:

```

import { inject } from "vue";

const route = inject("route");

```

If you are not using the `@rzlRoutes` Blade directive, import Rzl Ziggy-Route configuration too and pass it to `.use()`:

> ℹ️ Path import `import { appRoutes } from "./rzl-ziggy/routes/index.js";` depend from your setting at config php file, see: [Output Name File And Path To Generate](#output-name-file-and-path-to-generate).

```
import { createApp } from "vue";
import { rzlZiggyVue } from "@rzl-zone/ziggy-route/vue";
import { appRoutes } from "./rzl-ziggy/routes/index.js";
import App from "./App.vue";

createApp(App).use(rzlZiggyVue, JSON.parse(appRoutes));
```

If you're using TypeScript, you may need to add the following declaration to a `.d.ts` file in your project to avoid type errors when using the `route()` function in your Vue component templates:

```
declare module "vue" {
    interface ComponentCustomProperties {
        route: typeof routeFn;
    }
}
```

### React

[](#react)

Rzl Ziggy includes a `useRoute()` hook to make it easy to use the `route()` helper in your React app:

```
import React from "react";
import { useRoute } from "@rzl-zone/ziggy-route/react";

export default function PostsLink() {
    const route = useRoute();

    return Posts;
}
```

If you are not using the `@rzlRoutes` Blade directive, import Rzl Ziggy-Route configuration too and pass it to `useRoute()`:

> ℹ️ Path import `import { appRoutes } from "./rzl-ziggy/routes/index.js";` depend from your setting at config php file, see: [Output Name File And Path To Generate](#output-name-file-and-path-to-generate).

```
import React from "react";
import { useRoute } from "@rzl-zone/ziggy-route/react";
import { appRoutes } from "./rzl-ziggy/routes/index.js";

export default function PostsLink() {
    const route = useRoute(JSON.parse(appRoutes));

    return Posts;
}
```

You can also make the `Rzl Ziggy` config object available globally, so you can call `useRoute()` without passing Rzl Ziggy-Route configuration to it every time:

```
// app.js
import { appRoutes } from "./rzl-ziggy/routes/index.js";
globalThis.appRoutes = JSON.parse(appRoutes);
```

### SPAs or separate repos

[](#spas-or-separate-repos)

Rzl Ziggy-Route `route()` function is available as an NPM package, for use in JavaScript projects managed separately from their Laravel backend (i.e. without Composer or a `vendor` directory). You can install the NPM package with `npm install @rzl-zone/ziggy-route`.

To make your routes available on the frontend for this function to use, you can either run `php artisan rzl-ziggy:generate` and add the generated config file to your frontend project, or you can return Rzl Ziggy-Route config as JSON from an endpoint in your Laravel API (see [Retrieving Rzl Ziggy-Route config from an API endpoint](#retrieving-rzl-ziggy-route-config-from-an-api-endpoint) below for an example of how to set this up).

### Using with Inertiajs

[](#using-with-inertiajs)

#### SSR MODE (CSR can be skip):

[](#ssr-mode-csr-can-be-skip)

When you using Inertia-js with SSR mode, and you using `@rzlRoutes` directive in your app.blade.php, you need put this config in your `ssr.{tsx|jsx|ts|js}` file, for TypeScript global `route` because using `@rzlRoutes` directive, see: [TypeScript Support](#user-content-typescript-support) for more detail.

#### Server-side: at HandleInertiaRequests.php (middleware) file.

[](#server-side-at-handleinertiarequestsphp-middleware-file)

```
namespace App\Http\Middleware;

use Inertia\Middleware;
use Illuminate\Http\Request;
use RzlZone\ZiggyRoute\RzlZiggy;
use Illuminate\Foundation\Inspiring;

class HandleInertiaRequests extends Middleware
{
  // modify at share method only.
  public function share(Request $request): array
  {
    return [
      ...parent::share($request),

      //! This is required
      "url" => [
        "root" => $request->root(),
        "currentPath" => $request->getPathInfo(),
        "searchParams" => getQueryParams($request),
        "currentLocation" => $request->url(),
        "currentFullUrl" => $request->fullUrl(),
        "previousPath" => (str(url()->previous()))->replace(url("/"), ""),
      ],

      //! This is required if using `@rzlRoutes` directive
      "rzlZiggy" => fn(): array => [
        ...(new RzlZiggy())->jsonConfigsSsr(),
      ],

      // ....other your props config
    ];
  }
}
```

#### Client-side: at your (ssr.{tsx|jsx|ts|js}) file

[](#client-side-at-your-ssrtsxjsxtsjs-file)

```
import {
  route as defaultRoute,
  type Config,
  type RouteName,
  type RouteParams
} from "@rzl-zone/ziggy-route";

createServer((page) =>
  createInertiaApp({
    setup: ({ App, props }) => {
      //! this is required.
      (globalThis as any).route = (
        name: RouteName,
        params?: RouteParams | null | undefined,
        absolute?: boolean
      ) => {
        return defaultRoute(
          name,
          params,
          absolute,
          page.props.rzlZiggy as Config
        );
      };

      return ;
    },
    // ....other your props config
  })
);
```

---

Publish Config File
-------------------

[](#publish-config-file)

You can customize the default configuration of Rzl Ziggy by publishing the `rzl-ziggy.php` file to your `config` directory. Run the following command in your terminal:

```
php artisan vendor:publish --tag=rzl-ziggy
```

---

Filtering Routes
----------------

[](#filtering-routes)

Rzl Ziggy supports filtering the list of routes it outputs, which is useful if you have certain routes that you don't want to be included and visible in your HTML source.

Important

Hiding routes from Rzl Ziggy-Route output is not a replacement for thorough authentication and authorization. Routes that should not be accessibly publicly should be protected by authentication whether they're filtered out of Rzl Ziggy-Route output or not.

### Including/excluding routes

[](#includingexcluding-routes)

To set up route filtering, create a config file in your Laravel app at `config/rzl-ziggy.php` and add **either** an `only` or `except` key containing an array of route name patterns.

> Note: You have to choose one or the other. Setting both `only` and `except` will disable filtering altogether and return all named routes.

```
// config/rzl-ziggy.php

return [
    "only" => ["home", "posts.index", "posts.show"],

    // other you config...
];
```

You can use asterisks as wildcards in route filters. In the example below, `admin.*` will exclude routes named `admin.login`, `admin.register`, etc.:

```
// config/rzl-ziggy.php

return [
    "except" => ["_debugbar.*", "horizon.*", "admin.*"],

    // other you config...
];
```

### Filtering with groups

[](#filtering-with-groups)

You can also define groups of routes that you want make available in different places in your app, using a `groups` key in your config file:

```
// config/rzl-ziggy.php

return [
    "groups" => [
        "admin" => ["admin.*", "users.*"],
        "author" => ["posts.*"],
    ],

    // other you config...
];
```

Then, you can expose a specific group by passing the group name into the `@rzlRoutes` Blade directive:

```
{{-- authors.blade.php --}}

@rzlRoutes("author")
```

To expose multiple groups you can pass an array of group names:

```
{{-- admin.blade.php --}}

@rzlRoutes(["admin", "author"])
```

> Note: Passing group names to the `@rzlRoutes` directive will always take precedence over your other `only` or `except` settings.

---

Default Parameter Values
------------------------

[](#default-parameter-values)

Rzl Ziggy supports default route parameter values ([Laravel docs](https://laravel.com/docs/urls#default-values)).

```
Route::get("{locale}/posts/{post}", fn (Post $post) => /* ... */)->name("posts.show");
```

#### With config file:

[](#with-config-file)

> ℹ️ To generate config file, see: [**Publish Config File**](#publish-config-file).

```
// config/rzl-ziggy.php

return [
    /** Default values for dynamic route parameters.
     *
     * These values will be applied automatically to any route parameter
     * that exists in the route URI but is not explicitly passed during route generation.
     *
     * Useful for things like localization (e.g. `{locale}`), tenant identifiers (e.g. `{team}`),
     * or filtering (e.g. `{type}`) without having to always specify them in the frontend.
     *
     * You can override these at runtime via `URL::defaults([...])`.
     */
    "defaults" => [
        /** Default for `{locale}` route parameter. CLI `--locale` overrides this value. */
        "locale" => env("APP_LOCALE", "en"),

        // another example:...
        // "type"   => "default", // Default value for routes requiring {type}
        // "team"   => "main",    // Default tenant/team identifier (e.g. {team})
    ],

    // other you config...
];
```

---

Routes File Generator
---------------------

[](#routes-file-generator)

### Using JavaScript or TypeScript

[](#using-javascript-or-typescript)

You can also format your front-end using JavaScript or TypeScript when running the Artisan commands `php artisan rzl-ziggy:generate` or `php artisan rzl-ziggy:generate --types`:

```
// config/rzl-ziggy.php

return [
  "lang" => "ts",

  // other you config...
];
```

> ⚠️ Valid options: `"ts"` (TypeScript, .ts), `"js"` (JavaScript, .js) ,default: `"ts"`.

> ℹ️ Notes:
>
> - If this config value (`rzl-ziggy.lang`) is invalid or empty, it defaults to `"ts"`.
> - You can override it using the CLI option: `php artisan rzl-ziggy:generate --lang=...`.
> - If the CLI `--lang` value is invalid, it falls back to this config value.
> - If both are invalid, "ts" will be used as a safe fallback.

### Output Name File And Path To Generate

[](#output-name-file-and-path-to-generate)

You can also set the output location when running the Artisan command `php artisan rzl-ziggy:generate` or `php artisan rzl-ziggy:generate --types`:

> ⚠️ Be careful when naming the folder and file: if the folder name and filename are the same (e.g. folder `routes/` and file `routes.ts`), a file with the same name inside the folder may be accidentally overwritten.

```
// config/rzl-ziggy.php

return [
  "output" => [
    "name" => "index", // ➔ index.ts or index.js

    "path" => [
      "main" => "resources/js/rzl-ziggy/routes", // Output folder only
    ]
  ],

  // other you config...
];
```

> ℹ️ **The `"output.name"` is name of the generated route file (without extension).**
> Example: `"index"` will become `index.ts` or `index.js` depending on the selected `lang`.
>
> ```
> Notes:
> - The extension will be automatically added based on the `lang` value (`"ts"` or `"js"`).
> - If this value is invalid or empty, it defaults to `"index"`.
> - You can override this config using the CLI option: `--name=...`.
> - If both are invalid, `"index"` will be used as the safe default.
>
> ```

> ℹ️ **The `"output.path.main"` is output folder path for the main generated route file.**
> Example: `"resources/js/rzl-ziggy/routes"` will result in something like `"resources/js/rzl-ziggy/routes/index.ts"`
>
> ```
> Notes:
> - Do **not** prefix the path with `/` or `\\` — it should be relative to the project root.
> - This path can be overridden using the CLI option: `--path=...`
> - If the CLI `--path` is null, empty, or omitted, and this config value is also empty or invalid, it will default to: `"resources/js/rzl-ziggy/routes"`.
> - If the provided path is invalid (e.g. not writable or not a directory), an error will be thrown.
> - This path does **not** include the filename or extension — only the folder.
>
> ```

---

Automatically Regenerates File Routes
-------------------------------------

[](#automatically-regenerates-file-routes)

#### Rzl Ziggy includes a built-in Vite plugin that automatically generates a route index file (index.ts or index.js) based on your Laravel named routes (location depends your setting, see: [Output Name File And Path To Generate](#output-name-file-and-path-to-generate)).

[](#rzl-ziggy-includes-a-built-in-vite-plugin-that-automatically-generates-a-route-index-file-indexts-or-indexjs-based-on-your-laravel-named-routes-location-depends-your-setting-see-output-name-file-and-path-to-generate)

#### - Works the same as:

[](#--works-the-same-as)

```
php artisan rzl-ziggy:generate
# or
php artisan rzl-ziggy:generate --types
```

#### - Auto-regenerates the file whenever:

[](#--auto-regenerates-the-file-whenever)

```
- You change `.env` (e.g. APP_URL).
- You update any `routes/*.php` file.
- You change on `config/rzl-ziggy.php` file.
- No need to run manual commands—works live in development (npm run dev).

```

#### - Setting in your vite.config.ts or vite.config.js, register the plugin:

[](#--setting-in-your-viteconfigts-or-viteconfigjs-register-the-plugin)

```
import rzlZiggyVitePlugin from "@rzl-zone/ziggy-route/vite-plugin"

export default defineConfig({
  plugins: [
    rzlZiggyVitePlugin({
      // ...you can replace default options.
    }),

    // ...other your plugin
  ],
})
```

Laravel Mix plugin example```
const mix = require("laravel-mix");
const { exec } = require("child_process");

mix.extend("rzlZiggy", new class {
    register(config = {}) {
        this.watch = config.watch ?? ["routes/**/*.php"];
        this.path = config.path ?? "";
        this.enabled = config.enabled ?? !Mix.inProduction();
    }

    boot() {
        if (!this.enabled) return;

        const command = () => exec(
            `php artisan rzl-ziggy:generate ${this.path}`,
            (error, stdout, stderr) => console.log(stdout)
        );

        command();

        if (Mix.isWatching() && this.watch) {
            ((require("chokidar")).watch(this.watch))
                .on("change", (path) => {
                    console.log(`${path} changed...`);
                    command();
                });
        };
    }
}());

mix.js("resources/js/app.js", "public/js")
    .postCss("resources/css/app.css", "public/css", [])
    .rzlZiggy();
```

---

Other
-----

[](#other)

### TLS/SSL termination and trusted proxies

[](#tlsssl-termination-and-trusted-proxies)

If your application is using [TLS/SSL termination](https://en.wikipedia.org/wiki/TLS_termination_proxy) or is behind a load balancer or proxy, or if it's hosted on a service that is, Rzl Ziggy may generate URLs with a scheme of `http` instead of `https`, even if your app URL uses `https`. To fix this, set up your Laravel app's trusted proxies according to the documentation on [Configuring Trusted Proxies](https://laravel.com/docs/requests#configuring-trusted-proxies).

### Using `@rzlRoutes` with a Content Security Policy

[](#using-rzlroutes-with-a-content-security-policy)

A [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) may block inline scripts, including those output by Rzl Ziggy-Route `@rzlRoutes` Blade directive. If you have a CSP and are using a nonce to flag safe inline scripts, you can pass the nonce to the `@rzlRoutes` directive and it will be added to Rzl Ziggy-Route script tag:

```
@rzlRoutes(nonce: "your-nonce-here")
```

### Disabling the `route()` helper

[](#disabling-the-route-helper)

If you only want to use the `@rzlRoutes` directive to make Rzl Ziggy-Route configuration available in JavaScript, but don't need the `route()` helper function, set the `rzl-ziggy.skip-route-function` config to `true`.

### Retrieving Rzl Ziggy-Route config from an API endpoint

[](#retrieving-rzl-ziggy-route-config-from-an-api-endpoint)

If you need to retrieve Rzl Ziggy-Route config from your Laravel backend over the network, you can create a route that looks something like this:

```
// routes/api.php

use RzlZone\Ziggy\RzlZiggy;

Route::get("rzl-ziggy", fn () => response()->json(new RzlZiggy));
```

---

Contributing
------------

[](#contributing)

This project is heavily inspired by and based on [Ziggy](https://github.com/tighten/ziggy), originally developed by the team at Tighten.

Original Authors of Ziggy:
--------------------------

[](#original-authors-of-ziggy)

- [Daniel Coulbourne](https://twitter.com/DCoulbourne)
- [Jake Bathman](https://twitter.com/jakebathman)
- [Matt Stauffer](https://twitter.com/stauffermatt)
- [Jacob Baker-Kretzmar](https://twitter.com/bakerkretzmar)
- [All contributors](https://github.com/rzl-zone/ziggy-route/contributors)

Additional Customization by:
----------------------------

[](#additional-customization-by)

- [Rzl App](https://github.com/rzl-app)
- [Rzl Zone](https://github.com/rzl-zone)

Special thanks to [Caleb Porzio](http://twitter.com/calebporzio), [Adam Wathan](http://twitter.com/adamwathan), and [Jeffrey Way](http://twitter.com/jeffrey_way) for help solidifying the idea.

---

Security
--------

[](#security)

Please review our [security policy](../../security/policy) on how to report security vulnerabilities.

---

License
-------

[](#license)

Rzl Ziggy is open-source software released under the MIT license.
See [LICENSE](LICENSE) for more information.

---

Credits
-------

[](#credits)

- Forked and extended from [Ziggy by Tighten](https://github.com/tighten/ziggy).
- Inspired by the work of Daniel Coulbourne, Jake Bathman, Matt Stauffer, and Jacob Baker-Kretzmar.
- Custom features and enhancements maintained by [Rizalfin Dwiky (Rzl)](https://github.com/rzl-app).

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance71

Regular maintenance activity

Popularity10

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~9 days

Recently: every ~18 days

Total

14

Last Release

163d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d631f4e1637d8f1184390a2a5635d698e1229bb25bffb6eb6b4dab42912d59b3?d=identicon)[rzl-zone](/maintainers/rzl-zone)

---

Top Contributors

[![rzl-app](https://avatars.githubusercontent.com/u/133492532?v=4)](https://github.com/rzl-app "rzl-app (57 commits)")

---

Tags

laraveljavascriptroutesZiggyJStypescriptroutetsrzl-apprzl ziggyrzlrzl zoneziggy-routerzl zone ziggy route

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/rzl-zone-ziggy-route/health.svg)

```
[![Health](https://phpackages.com/badges/rzl-zone-ziggy-route/health.svg)](https://phpackages.com/packages/rzl-zone-ziggy-route)
```

###  Alternatives

[tightenco/ziggy

Use your Laravel named routes in JavaScript.

4.3k41.6M267](/packages/tightenco-ziggy)[maartenstaa/laravel-41-route-caching

This package allows you to cache your routes definitions, thereby speeding up each request.

25371.9k](/packages/maartenstaa-laravel-41-route-caching)[kiwilan/typescriptable-laravel

PHP package for Laravel to type Eloquent models, routes, Spatie Settings with autogenerated TypeScript. If you want to use some helpers with Inertia, you can install associated NPM package.

3920.9k](/packages/kiwilan-typescriptable-laravel)[michele-angioni/laravel-js-lang-converter

Laravel Localization in JavaScript

2565.2k](/packages/michele-angioni-laravel-js-lang-converter)[proai/lumen-annotations

Route and event binding annotations for Laravel Lumen

1012.4k](/packages/proai-lumen-annotations)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)