{"id":36999750,"url":"https://github.com/syntaxlexx/ziggy","last_synced_at":"2026-01-14T00:01:09.232Z","repository":{"id":57014380,"uuid":"155092699","full_name":"syntaxlexx/ziggy","owner":"syntaxlexx","description":"Use your Laravel named routes in JavaScript","archived":false,"fork":true,"pushed_at":"2019-09-24T11:30:45.000Z","size":1767,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-12T08:43:12.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tightenco.github.io/ziggy/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"tighten/ziggy","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syntaxlexx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-28T16:42:54.000Z","updated_at":"2019-09-24T11:26:03.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/syntaxlexx/ziggy","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/syntaxlexx/ziggy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fziggy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fziggy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fziggy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fziggy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syntaxlexx","download_url":"https://codeload.github.com/syntaxlexx/ziggy/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntaxlexx%2Fziggy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28406433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-14T00:00:41.461Z","updated_at":"2026-01-14T00:01:09.169Z","avatar_url":"https://github.com/syntaxlexx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Ziggy - Use your Laravel Named Routes inside JavaScript](https://raw.githubusercontent.com/tightenco/ziggy/master/ziggy-banner.png?version=2)\n\n# Ziggy - Use your Laravel Named Routes inside JavaScript\n![TravisCi Status for tightenco/ziggy](https://travis-ci.org/tightenco/ziggy.svg?branch=master)\n![Total Downloads](https://poser.pugx.org/lexxyungcarter/ziggy/downloads)\n![Latest Stable Version](https://poser.pugx.org/lexxyungcarter/ziggy/v/stable)\n![License](https://poser.pugx.org/lexxyungcarter/chatmessenger/license)\n\nZiggy creates a Blade directive which you can include in your views. This will export a JavaScript object of your application's named routes, keyed by their names (aliases), as well as a global `route()` helper function which you can use to access your routes in your JavaScript.\n\n## Installation\n\n1. Add Ziggy to your Composer file: `composer require lexxyungcarter/ziggy`\n\n2. (if Laravel 5.4) Add `Lexx\\Ziggy\\ZiggyServiceProvider::class` to the `providers` array in your `config/app.php`.\n\n3. Include our Blade Directive (`@routes`) somewhere in your template before your main application JavaScript is loaded\u0026mdash;likely in the header somewhere.\n\n## Usage\n\nThis package replaces the `@routes` directive with a collection of all of your application's routes, keyed by their names. This collection is available at `Ziggy.namedRoutes`.\n\nThe package also creates an optional `route()` JavaScript helper which functions like Laravel's `route()` PHP helper, which can be used to retrieve URLs by name and (optionally) parameters.\n\n### Examples:\n\nWithout parameters:\n\n```js\nroute('posts.index') // Returns '/posts'\n```\n\nWith required parameter:\n\n```js\nroute('posts.show', {id: 1}) // Returns '/posts/1'\nroute('posts.show', [1]) // Returns '/posts/1'\nroute('posts.show', 1) // Returns '/posts/1'\n```\n\nWith multiple required parameters:\n\n```js\nroute('events.venues.show', {event: 1, venue: 2}) // Returns '/events/1/venues/2'\nroute('events.venues.show', [1, 2]) // Returns '/events/1/venues/2'\n```\n\nWith query parameters:\n\n```js\nroute('events.venues.show', {event: 1, venue: 2, page: 5, count: 10}) // Returns '/events/1/venues/2?page=5\u0026count=10'\n```\n\nIf whole objects are passed, Ziggy will automatically look for `id` primary key:\n\n```js\nvar event = {id: 1, name: 'World Series'};\nvar venue = {id: 2, name: 'Rogers Centre'};\n\nroute('events.venues.show', [event, venue]) // Returns '/events/1/venues/2'\n```\n\nPractical AJAX example:\n\n```js\nvar post = {id: 1, title: 'Ziggy Stardust'};\n\nreturn axios.get(route('posts.show', post))\n    .then((response) =\u003e {\n        return response.data;\n    });\n```\n### Default Values\nSee Laravel [documentation](https://laravel.com/docs/5.5/urls#default-values)\n\nDefault values work out of the box for Laravel versions \u003e= 5.5.29,\nfor the previous versions you will need to set the default parameters\nby including this code somewhere in the same page as our Blade Directive (@routes)\n```js\nZiggy.defaultParameters = {\n    //example\n    locale: \"en\"\n}\n```\n\n## Filtering Routes\nFiltering routes is *completely* optional. If you want to pass all of your routes to JavaScript by default, you can carry on using Ziggy as described above.\n\n### Basic Whitelisting \u0026 Blacklisting\nTo take advantage of basic whitelisting or blacklisting of routes, you will first need to create a standard config file called `ziggy.php` in the `config/` directory of your Laravel app and set **either** the `whitelist` or `blacklist` setting to an array of route names.\n\n**Note: You've got to choose one or the other. Setting `whitelist` and `blacklist` will disable filtering altogether and simply return the default list of routes.**\n\n#### Example `config/ziggy.php`:\n```php\n\u003c?php\nreturn [\n    // 'whitelist' =\u003e ['home', 'api.*'],\n    'blacklist' =\u003e ['debugbar.*', 'horizon.*', 'admin.*'],\n];\n```\n\nAs shown in the example above, Ziggy the use of asterisks as wildcards in filters. `home` will only match the route named `home` whereas `api.*` will match any route whose name begins with `api.`, such as `api.posts.index` and `api.users.show`.\n\n### Simple Whitelisting \u0026 Blacklisting Macros\n\nWhitelisting and blacklisting can also be achieved using the following macros.\n\n#### Example Whitelisting\n\n```php\nRoute::whitelist(function () {\n    Route::get('...')-\u003ename('posts');\n});\n\nRoute::whitelist()-\u003eget('...')-\u003ename('posts');\n```\n\n#### Example Blacklisting\n\n```php\nRoute::blacklist(function () {\n    Route::get('...')-\u003ename('posts');\n});\n\nRoute::blacklist()-\u003eget('...')-\u003ename('posts');\n```\n\n### Advanced Whitelisting Using Groups\n\nYou may also optionally define multiple whitelists by defining `groups` in your `config/ziggy.php`:\n\n```php\n\u003c?php\nreturn [\n    'groups' =\u003e [\n        'admin' =\u003e [\n            'admin.*',\n            'posts.*',\n        ],\n        'author' =\u003e [\n            'posts.*',\n        ]\n    ],\n];\n```\n\nIn the above example, you can see we have configured multiple whitelists for different user roles.  You may expose a specific whitelist group by passing the group key into `@routes` within your blade view.  Example:\n\n```php\n@routes('author')\n```\n**Note: Using a group will always take precedence over the above mentioned `whitelist` and `blacklist` settings.**\n\n### Other useful methods\n\n#### `current()`\nTo get the name of the current route (based on the browser's `window.location`) you can use:\n\n```javascript\nroute().current()\n// returns \"events.index\"\n```\n\nTo check that we are at a current route, pass the desired route in the only param:\n\n```javascript\nroute().current(\"events.index\")\n// returns true\n```\n\nYou can even use wildcards:\n\n```javascript\nroute().current(\"events.*\")\n// returns true\n```\n\n#### `url()`\nZiggy returns a wrapper of the string primitive, which behaves exactly like a string in almost all cases.\nIn rare cases where third-party libraries use strict type checking, you may require an actual `String` literal.\n\nTo achieve this simple call `.url()` on your route:\n\n```javascript\nroute('home').url()\n// http://myapp.local/\n```\n\n## Artisan command\n\nZiggy publishes an artisan command to generate a `ziggy.js` routes file, which can be used as part of an asset pipeline such as [Laravel Mix](https://laravel.com/docs/mix).\n\nYou can run `php artisan ziggy:generate` in your project to generate a static routes file in `resources/assets/js/ziggy.js`.\n\nOptionally, include a second parameter to override the path and file names (you must pass a file name with the path):\n\n```\nphp artisan ziggy:generate \"resources/foo.js\"\n```\n\nExample `ziggy.js`, where the named routes `home` and `login` exist in `routes/web.php`:\n\n```php\n// routes/web.php\n\n\u003c?php\n\nRoute::get('/', function () {\n    return view('welcome');\n})-\u003ename('home');\n\nRoute::get('/login', function () {\n    return view('login');\n})-\u003ename('login');\n```\n\n```js\n// ziggy.js\n\nvar Ziggy = {\n    namedRoutes: {\"home\":{\"uri\":\"\\/\",\"methods\":[\"GET\",\"HEAD\"],\"domain\":null},\"login\":{\"uri\":\"login\",\"methods\":[\"GET\",\"HEAD\"],\"domain\":null}},\n    baseUrl: 'http://myapp.local/',\n    baseProtocol: 'http',\n    baseDomain: 'myapp.local',\n    basePort: false\n};\n\nexport {\n    Ziggy\n}\n```\n\n### Importing the `route()` helper and generated `ziggy.js`\n\n```js\n// webpack.mix.js\nconst path = require('path')\n...\nmix.webpackConfig({\n    resolve: {\n        alias: {\n            ...\n            ziggy: path.resolve('vendor/tightenco/ziggy/dist/js/route.js'),\n        },\n    },\n})\n```\n\n```js\n// app.js\n\nimport route from 'ziggy'\nimport { Ziggy } from './ziggy'\n\n...\n```\n\n## Using with Vue\n### components\n\nIf you want to use the `route()` helper within a Vue component, import the helper and generated `ziggy.js` as above. Then you'll need to add this to your `app.js` file:\n\n```js\n// app.js\nimport route from 'ziggy'\nimport { Ziggy } from './ziggy'\n\nVue.mixin({\n    methods: {\n        route: (name, params, absolute) =\u003e route(name, params, absolute, Ziggy),\n    }\n});\n```\nThen, use the method in your Vue components like so:\n\n`\u003ca class=\"nav-link\" :href=\"route('home')\"\u003eHome\u003c/a\u003e`\n\nThanks to [Archer70](https://github.com/tightenco/ziggy/issues/70#issuecomment-369129032) for this solution.\n\n### Using with Vue-Router\nSince vue router accepts only relative urls, a `relative()` method exists that returns a relative url from the normal absolute url\ngot from route() method. So you can simply chain it.\n\n\u003e *NB* As a precaution, colons get encoded to `%3A` when urls are generated with route(), so it would be a good idea to pass `true`\nto the relative method. Behind the scenes, the decodeURIComponent gets called and ensures that the collon is returned.\n```js\n// routes.js\n\n// (Similar to Laravel's route('users/{username}'))\nroute('users.show', ':username').relative(true)\n//              /users/:username         =\u003e relative(true)\n//              /users/%3Ausername       =\u003e relative()\n\n// (Similar to Laravel's route('users/{id}/edit'))\nroute('users.show', ':id').relative(true)\n//              /users/:id         =\u003e relative(true)\n//              /users/%3Aid       =\u003e relative()\n\n\nvar routes = [\n\n    { path: route('users.index').relative(true), component: UsersIndex },\n\n    // other routes\n]\n\nexport const routes;\n\n\n\n// users/Index.vue    component\nexport default {\n\n    methods: {\n        view(user)\n        {\n            // no need to pass true in relative()\n            return this.$router.push(route('users.show', user.username).relative());\n        },\n    }\n}\n```\n\n### Using with `laravel-haml` (and other custom Blade compilers)\n## Environment-based loading of minified route helper file\n\nWhen loading the blade helper file, Ziggy will detect the current environment and minify the output if `APP_ENV` is not `local`.\n\nWhen this happens, `ziggy.min.js` will be loaded. Otherwise, `ziggy.js` will be used.\n\n## Optional `route` helper\n\nIf you only want routes available through `@routes`, but don't need the `route` helper function, you can include `skip-route-function` in your config and set it to `true`:\n\n```php\n// config/ziggy.php\n\n\u003c?php\n\nreturn [\n    'skip-route-function' =\u003e true\n];\n```\n## Contributions \u0026 Credits\n\nTo get started contributing to Ziggy, check out [the contribution guide](CONTRIBUTING.md).\n\n- [Lexx YungCarter](https://twitter.com/UnderscoreLexx)\n- [Daniel Coulbourne](https://twitter.com/DCoulbourne)\n- [Matt Stauffer](https://twitter.com/stauffermatt)\n\nThanks 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.\n\n### Thanks to [all our contributors](https://github.com/tightenco/ziggy/graphs/contributors)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntaxlexx%2Fziggy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyntaxlexx%2Fziggy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntaxlexx%2Fziggy/lists"}