ziggy-js 1.8.0 → 1.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- ![Ziggy - Use your Laravel named routes in JavaScript](https://raw.githubusercontent.com/tighten/ziggy/main/ziggy-banner.png)
1
+ ![Ziggy - Use your Laravel routes in JavaScript](https://raw.githubusercontent.com/tighten/ziggy/main/ziggy-banner.png)
2
2
 
3
3
  # Ziggy – Use your Laravel routes in JavaScript
4
4
 
@@ -8,146 +8,133 @@
8
8
  [![Latest Version on NPM](https://img.shields.io/npm/v/ziggy-js.svg?style=flat)](https://npmjs.com/package/ziggy-js)
9
9
  [![Downloads on NPM](https://img.shields.io/npm/dt/ziggy-js.svg?style=flat)](https://npmjs.com/package/ziggy-js)
10
10
 
11
- Ziggy provides a JavaScript `route()` helper function that works like Laravel's, making it easy to use your Laravel named routes in JavaScript.
11
+ Ziggy provides a JavaScript `route()` function that works like Laravel's, making it a breeze to use your named Laravel routes in JavaScript.
12
12
 
13
13
  Ziggy supports all versions of Laravel from `5.4` onward, and all modern browsers.
14
14
 
15
15
  - [**Installation**](#installation)
16
16
  - [**Usage**](#usage)
17
- - [The `route()` helper](#the-route-helper)
18
- - [The `Router` class](#the-router-class)
17
+ - [`route()` function](#route-function)
18
+ - [`Router` class](#router-class)
19
19
  - [Route-model binding](#route-model-binding)
20
20
  - [TypeScript](#typescript)
21
- - [**Advanced Setup**](#advanced-setup)
22
- - [JavaScript frameworks](#javascript-frameworks)
21
+ - [**JavaScript frameworks**](#javascript-frameworks)
22
+ - [Generating and importing Ziggy's configuration](#generating-and-importing-ziggys-configuration)
23
+ - [Importing the `route()` function](#importing-the-route-function)
23
24
  - [Vue](#vue)
24
25
  - [React](#react)
25
26
  - [SPAs or separate repos](#spas-or-separate-repos)
26
27
  - [**Filtering Routes**](#filtering-routes)
27
- - [Basic Filtering](#basic-filtering)
28
- - [Filtering using Groups](#filtering-using-groups)
28
+ - [Including/excluding routes](#includingexcluding-routes)
29
+ - [Filtering with groups](#filtering-with-groups)
29
30
  - [**Other**](#other)
30
31
  - [**Contributing**](#contributing)
31
32
 
32
33
  ## Installation
33
34
 
34
- Install Ziggy in your Laravel app:
35
+ Install Ziggy in your Laravel app with Composer:
35
36
 
36
37
  ```bash
37
38
  composer require tightenco/ziggy
38
39
  ```
39
40
 
40
- Add the `@routes` Blade directive to your main layout (_before_ your application's JavaScript), and the `route()` helper function will now be available globally!
41
+ Add the `@routes` Blade directive to your main layout (_before_ your application's JavaScript), and the `route()` helper function will be available globally!
41
42
 
42
43
  > By default, the output of the `@routes` 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).
43
44
 
44
45
  ## Usage
45
46
 
46
- #### The `route()` helper
47
+ ### `route()` function
47
48
 
48
- Ziggy's `route()` helper function works like Laravel's—you can pass it the name of one of your routes, and the parameters you want to pass to the route, and it will return a URL.
49
+ Ziggy's `route()` function works like [Laravel's `route()` helper](https://laravel.com/docs/10.x/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.
49
50
 
50
- **Basic usage**
51
+ #### Basic usage
51
52
 
52
53
  ```php
53
- // routes/web.php
54
-
55
54
  Route::get('posts', fn (Request $request) => /* ... */)->name('posts.index');
56
55
  ```
57
56
 
58
57
  ```js
59
- // app.js
60
-
61
58
  route('posts.index'); // 'https://ziggy.test/posts'
62
59
  ```
63
60
 
64
- **With parameters**
61
+ #### Parameters
65
62
 
66
63
  ```php
67
- // routes/web.php
68
-
69
- Route::get('posts/{post}', fn (Request $request, Post $post) => /* ... */)->name('posts.show');
64
+ Route::get('posts/{post}', fn (Post $post) => /* ... */)->name('posts.show');
70
65
  ```
71
66
 
72
67
  ```js
73
- // app.js
74
-
75
68
  route('posts.show', 1); // 'https://ziggy.test/posts/1'
76
69
  route('posts.show', [1]); // 'https://ziggy.test/posts/1'
77
70
  route('posts.show', { post: 1 }); // 'https://ziggy.test/posts/1'
78
71
  ```
79
72
 
80
- **With multiple parameters**
73
+ #### Multiple parameters
81
74
 
82
75
  ```php
83
- // routes/web.php
84
-
85
- Route::get('events/{event}/venues/{venue}', fn (Request $request, Event $event, Venue $venue) => /* ... */)->name('events.venues.show');
76
+ Route::get('venues/{venue}/events/{event}', fn (Venue $venue, Event $event) => /* ... */)
77
+ ->name('venues.events.show');
86
78
  ```
87
79
 
88
80
  ```js
89
- // app.js
90
-
91
- route('events.venues.show', [1, 2]); // 'https://ziggy.test/events/1/venues/2'
92
- route('events.venues.show', { event: 1, venue: 2 }); // 'https://ziggy.test/events/1/venues/2'
81
+ route('venues.events.show', [1, 2]); // 'https://ziggy.test/venues/1/events/2'
82
+ route('venues.events.show', { venue: 1, event: 2 }); // 'https://ziggy.test/venues/1/events/2'
93
83
  ```
94
84
 
95
- **With query parameters**
85
+ #### Query parameters
96
86
 
97
- ```php
98
- // routes/web.php
87
+ Ziggy adds arguments that don't match any named route parameters as query parameters:
99
88
 
100
- Route::get('events/{event}/venues/{venue}', fn (Request $request, Event $event, Venue $venue) => /* ... */)->name('events.venues.show');
89
+ ```php
90
+ Route::get('venues/{venue}/events/{event}', fn (Venue $venue, Event $event) => /* ... */)
91
+ ->name('venues.events.show');
101
92
  ```
102
93
 
103
94
  ```js
104
- // app.js
105
-
106
- route('events.venues.show', {
107
- event: 1,
108
- venue: 2,
95
+ route('venues.events.show', {
96
+ venue: 1,
97
+ event: 2,
109
98
  page: 5,
110
99
  count: 10,
111
100
  });
112
- // 'https://ziggy.test/events/1/venues/2?page=5&count=10'
101
+ // 'https://ziggy.test/venues/1/events/2?page=5&count=10'
113
102
  ```
114
103
 
115
- If you have a query parameter with the same name as a route parameter, nest it under a `_query` key:
104
+ If you need to pass a query parameter with the same name as a route parameter, nest it under the special `_query` key:
116
105
 
117
106
  ```js
118
- route('events.venues.show', {
119
- event: 1,
120
- venue: 2,
107
+ route('venues.events.show', {
108
+ venue: 1,
109
+ event: 2,
121
110
  _query: {
122
111
  event: 3,
123
112
  page: 5,
124
113
  },
125
114
  });
126
- // 'https://ziggy.test/events/1/venues/2?event=3&page=5'
115
+ // 'https://ziggy.test/venues/1/events/2?event=3&page=5'
127
116
  ```
128
117
 
129
- Like Laravel's `route()` helper, Ziggy automatically encodes boolean query parameters as integers in the query string:
118
+ Like Laravel, Ziggy automatically encodes boolean query parameters as integers in the query string:
130
119
 
131
120
  ```js
132
- route('events.venues.show', {
133
- event: 1,
134
- venue: 2,
121
+ route('venues.events.show', {
122
+ venue: 1,
123
+ event: 2,
135
124
  _query: {
136
125
  draft: false,
137
126
  overdue: true,
138
127
  },
139
128
  });
140
- // 'https://ziggy.test/events/1/venues/2?draft=0&overdue=1'
129
+ // 'https://ziggy.test/venues/1/events/2?draft=0&overdue=1'
141
130
  ```
142
131
 
143
- **With default parameter values**
132
+ #### Default parameter values
144
133
 
145
- See the [Laravel documentation on default route parameter values](https://laravel.com/docs/urls#default-values).
134
+ Ziggy supports default route parameter values ([Laravel docs](https://laravel.com/docs/urls#default-values)).
146
135
 
147
136
  ```php
148
- // routes/web.php
149
-
150
- Route::get('{locale}/posts/{post}', fn (Request $request, Post $post) => /* ... */)->name('posts.show');
137
+ Route::get('{locale}/posts/{post}', fn (Post $post) => /* ... */)->name('posts.show');
151
138
  ```
152
139
 
153
140
  ```php
@@ -157,12 +144,12 @@ URL::defaults(['locale' => $request->user()->locale ?? 'de']);
157
144
  ```
158
145
 
159
146
  ```js
160
- // app.js
161
-
162
147
  route('posts.show', 1); // 'https://ziggy.test/de/posts/1'
163
148
  ```
164
149
 
165
- **Practical AJAX example**
150
+ #### Examples
151
+
152
+ HTTP request with `axios`:
166
153
 
167
154
  ```js
168
155
  const post = { id: 1, title: 'Ziggy Stardust' };
@@ -170,14 +157,14 @@ const post = { id: 1, title: 'Ziggy Stardust' };
170
157
  return axios.get(route('posts.show', post)).then((response) => response.data);
171
158
  ```
172
159
 
173
- #### The `Router` class
160
+ ### `Router` class
174
161
 
175
- Calling Ziggy's `route()` helper function with no arguments will return an instance of the JavaScript `Router` class, which has some other useful properties and methods.
162
+ Calling Ziggy's `route()` function with no arguments will return an instance of its JavaScript `Router` class, which has some other useful properties and methods.
176
163
 
177
- **Checking the current route: `route().current()`**
164
+ #### Check the current route: `route().current()`
178
165
 
179
166
  ```js
180
- // Route called 'events.index', with URI '/events'
167
+ // Laravel route called 'events.index' with URI '/events'
181
168
  // Current window URL is https://ziggy.test/events
182
169
 
183
170
  route().current(); // 'events.index'
@@ -186,40 +173,41 @@ route().current('events.*'); // true
186
173
  route().current('events.show'); // false
187
174
  ```
188
175
 
189
- The `current()` method optionally accepts parameters as its second argument, and will check that their values also match in the current URL:
176
+ `route().current()` optionally accepts parameters as its second argument, and will check that their values also match in the current URL:
190
177
 
191
178
  ```js
192
- // Route called 'events.venues.show', with URI '/events/{event}/venues/{venue}'
193
- // Current window URL is https://myapp.com/events/1/venues/2?authors=all
179
+ // Laravel route called 'venues.events.show' with URI '/venues/{venue}/events/{event}'
180
+ // Current window URL is https://myapp.com/venues/1/events/2?hosts=all
194
181
 
195
- route().current('events.venues.show', { event: 1, venue: 2 }); // true
196
- route().current('events.venues.show', { authors: 'all' }); // true
197
- route().current('events.venues.show', { venue: 6 }); // false
182
+ route().current('venues.events.show', { venue: 1 }); // true
183
+ route().current('venues.events.show', { venue: 1, event: 2 }); // true
184
+ route().current('venues.events.show', { hosts: 'all' }); // true
185
+ route().current('venues.events.show', { venue: 6 }); // false
198
186
  ```
199
187
 
200
- **Checking if a route exists: `route().has()`**
188
+ #### Check if a route exists: `route().has()`
201
189
 
202
190
  ```js
203
- // App has only one named route, 'home'
191
+ // Laravel app has only one named route, 'home'
204
192
 
205
193
  route().has('home'); // true
206
194
  route().has('orders'); // false
207
195
  ```
208
196
 
209
- **Retrieving the current route params: `route().params`**
197
+ #### Retrieve the current route params: `route().params`
210
198
 
211
199
  ```js
212
- // Route called 'events.venues.show', with URI '/events/{event}/venues/{venue}'
213
- // Current window URL is https://myapp.com/events/1/venues/2?authors=all
200
+ // Laravel route called 'venues.events.show' with URI '/venues/{venue}/events/{event}'
201
+ // Current window URL is https://myapp.com/venues/1/events/2?hosts=all
214
202
 
215
- route().params; // { event: '1', venue: '2', authors: 'all' }
203
+ route().params; // { venue: '1', event: '2', hosts: 'all' }
216
204
  ```
217
205
 
218
206
  > Note: parameter values retrieved with `route().params` will always be returned as strings.
219
207
 
220
- #### Route-model binding
208
+ ### Route-model binding
221
209
 
222
- Ziggy supports Laravel [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 one of the route parameters, Ziggy will use the registered route-model binding keys for that route to find the parameter value in the object and insert it into the URL (falling back to an `id` key if there is one and the route-model binding key isn't present).
210
+ 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, 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, Ziggy will use the object's `id` key.
223
211
 
224
212
  ```php
225
213
  // app/Models/Post.php
@@ -234,62 +222,46 @@ class Post extends Model
234
222
  ```
235
223
 
236
224
  ```php
237
- // app/Http/Controllers/PostController.php
238
-
239
- class PostController
240
- {
241
- public function show(Request $request, Post $post)
242
- {
243
- return view('posts.show', ['post' => $post]);
244
- }
245
- }
246
- ```
247
-
248
- ```php
249
- // routes/web.php
250
-
251
- Route::get('blog/{post}', [PostController::class, 'show'])->name('posts.show');
225
+ Route::get('blog/{post}', function (Post $post) {
226
+ return view('posts.show', ['post' => $post]);
227
+ })->name('posts.show');
252
228
  ```
253
229
 
254
230
  ```js
255
- // app.js
256
-
257
231
  const post = {
232
+ id: 3,
258
233
  title: 'Introducing Ziggy v1',
259
234
  slug: 'introducing-ziggy-v1',
260
235
  date: '2020-10-23T20:59:24.359278Z',
261
236
  };
262
237
 
263
- // Ziggy knows that this route uses the 'slug' route-model binding key name:
238
+ // Ziggy knows that this route uses the 'slug' route-model binding key:
264
239
 
265
240
  route('posts.show', post); // 'https://ziggy.test/blog/introducing-ziggy-v1'
266
241
  ```
267
242
 
268
- Ziggy also supports [custom keys](https://laravel.com/docs/routing#customizing-the-key) for scoped bindings in the route definition (requires Laravel 7+):
243
+ Ziggy also supports [custom keys](https://laravel.com/docs/routing#customizing-the-key) for scoped bindings declared directly in a route definition:
269
244
 
270
245
  ```php
271
- // routes/web.php
272
-
273
- Route::get('authors/{author}/photos/{photo:uuid}', fn (Request $request, Author $author, Photo $photo) => /* ... */)->name('authors.photos.show');
246
+ Route::get('authors/{author}/photos/{photo:uuid}', fn (Author $author, Photo $photo) => /* ... */)
247
+ ->name('authors.photos.show');
274
248
  ```
275
249
 
276
250
  ```js
277
- // app.js
278
-
279
251
  const photo = {
280
252
  uuid: '714b19e8-ac5e-4dab-99ba-34dc6fdd24a5',
281
253
  filename: 'sunset.jpg',
282
254
  }
283
255
 
284
- route('authors.photos.show', [{ id: 1, name: 'Jacob' }, photo]);
256
+ route('authors.photos.show', [{ id: 1, name: 'Ansel' }, photo]);
285
257
  // 'https://ziggy.test/authors/1/photos/714b19e8-ac5e-4dab-99ba-34dc6fdd24a5'
286
258
  ```
287
259
 
288
- #### TypeScript
260
+ ### TypeScript
289
261
 
290
- Ziggy includes TypeScript type definitions, and a helper command that can generate additional type definitions to enable route name and parameter autocompletion.
262
+ Ziggy includes TypeScript type definitions, and an Artisan command that can generate additional type definitions to enable route name and parameter autocompletion.
291
263
 
292
- To generate the route types, run Ziggy's Artisan command with the `--types` or `--types-only` option:
264
+ To generate route types, run the `ziggy:generate` command with the `--types` or `--types-only` option:
293
265
 
294
266
  ```bash
295
267
  php artisan ziggy:generate --types
@@ -305,7 +277,7 @@ declare global {
305
277
  }
306
278
  ```
307
279
 
308
- If you don't have Ziggy's NPM package installed, add the following to your `jsconfig.json` or `tsconfig.json` to load Ziggy's types from the Composer vendor directory:
280
+ If you don't have Ziggy's NPM package installed, add the following to your `jsconfig.json` or `tsconfig.json` to load Ziggy's types from your vendor directory:
309
281
 
310
282
  ```json
311
283
  {
@@ -317,175 +289,164 @@ If you don't have Ziggy's NPM package installed, add the following to your `jsco
317
289
  }
318
290
  ```
319
291
 
320
- ## Advanced Setup
292
+ ## JavaScript frameworks
293
+
294
+ > [!NOTE]
295
+ > Many applications don't need the additional setup described here—the `@routes` Blade directive makes Ziggy's `route()` function and config available globally, including within bundled JavaScript files.
296
+
297
+ If you are not using the `@routes` Blade directive, you can import Ziggy's `route()` function and configuration directly into JavaScript/TypeScript files.
298
+
299
+ ### Generating and importing Ziggy's configuration
300
+
301
+ Ziggy provides an Artisan command to output its config and routes to a file:
321
302
 
322
- #### JavaScript frameworks
303
+ ```bash
304
+ php artisan ziggy:generate
305
+ ```
323
306
 
324
- If you are not using Blade, or would prefer not to use the `@routes` directive, Ziggy provides an Artisan command to output its config and routes to a file: `php artisan ziggy:generate`. By default this command stores your routes at `resources/js/ziggy.js`, but you can customize this path by passing a different value as an argument to the Artisan command or setting the `ziggy.output.path` config value. Alternatively, you can return Ziggy's config as JSON from an endpoint in your Laravel API (see [Retrieving Ziggy's routes and config from an API endpoint](#retrieving-ziggys-routes-and-config-from-an-api-endpoint) below for an example of how to set this up).
307
+ This command places your configuration in `resources/js/ziggy.js` by default, but you can customize this path by passing an argument to the Artisan command or setting the `ziggy.output.path` config value.
325
308
 
326
- The file generated by `php artisan ziggy:generate` will look something like this:
309
+ The file `ziggy:generate` creates looks something like this:
327
310
 
328
311
  ```js
329
- // ziggy.js
312
+ // resources/js/ziggy.js
330
313
 
331
314
  const Ziggy = {
332
- routes: {"home":{"uri":"\/","methods":["GET","HEAD"],"domain":null},"login":{"uri":"login","methods":["GET","HEAD"],"domain":null}},
333
- url: 'http://ziggy.test',
334
- port: false
315
+ url: 'https://ziggy.test',
316
+ port: null,
317
+ routes: {
318
+ home: {
319
+ uri: '/',
320
+ methods: [ 'GET', 'HEAD'],
321
+ domain: null,
322
+ },
323
+ login: {
324
+ uri: 'login',
325
+ methods: ['GET', 'HEAD'],
326
+ domain: null,
327
+ },
328
+ },
335
329
  };
336
330
 
337
331
  export { Ziggy };
338
332
  ```
339
333
 
340
- You can optionally create an alias to make importing Ziggy's core source files easier:
334
+ ### Importing the `route()` function
341
335
 
342
- ```js
343
- // vite.config.js
344
- export default defineConfig({
345
- resolve: {
346
- alias: {
347
- ziggy: 'vendor/tightenco/ziggy/dist',
348
- // 'vendor/tightenco/ziggy/dist/vue.es.js' if using the Vue plugin
349
- },
350
- },
351
- });
352
- ```
336
+ You can import Ziggy like any other JavaScript library. Without the `@routes` Blade directive Ziggy's config is not available globally, so it must be passed to the `route()` function manually:
353
337
 
354
338
  ```js
355
- // webpack.mix.js
339
+ import route from '../../vendor/tightenco/ziggy';
340
+ import { Ziggy } from './ziggy.js';
356
341
 
357
- // Mix v6
358
- const path = require('path');
342
+ route('home', undefined, undefined, Ziggy);
343
+ ```
359
344
 
360
- mix.alias({
361
- ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
362
- // 'vendor/tightenco/ziggy/dist/vue' if using the Vue plugin
363
- });
345
+ To simplify importing the `route()` function, you can create an alias to the vendor path:
364
346
 
365
- // Mix v5
366
- const path = require('path');
347
+ ```js
348
+ // vite.config.js
367
349
 
368
- mix.webpackConfig({
350
+ export default defineConfig({
369
351
  resolve: {
370
352
  alias: {
371
- ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
353
+ 'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
354
+ // 'vendor/tightenco/ziggy/dist/vue.es.js' if using the Vue plugin
372
355
  },
373
356
  },
374
357
  });
375
358
  ```
376
359
 
377
- Finally, import and use Ziggy like any other JavaScript library. Because the Ziggy config object is not available globally in this setup, you'll usually have to pass it to the `route()` function manually:
360
+ Now your imports can be shortened to:
378
361
 
379
362
  ```js
380
- // app.js
381
-
382
- import route from 'ziggy';
383
- import { Ziggy } from './ziggy';
384
-
385
- // ...
386
-
387
- route('home', undefined, undefined, Ziggy);
363
+ import route from 'ziggy-js';
388
364
  ```
389
365
 
390
- #### Vue
366
+ ### Vue
391
367
 
392
368
  Ziggy includes a Vue plugin to make it easy to use the `route()` helper throughout your Vue app:
393
369
 
394
370
  ```js
395
371
  import { createApp } from 'vue';
396
- import { ZiggyVue } from 'ziggy';
397
- import { Ziggy } from './ziggy';
398
- import App from './App';
372
+ import { ZiggyVue } from 'ziggy-js';
373
+ import App from './App.vue';
399
374
 
400
- createApp(App).use(ZiggyVue, Ziggy);
375
+ createApp(App).use(ZiggyVue);
376
+ ```
401
377
 
402
- // Vue 2
403
- import Vue from 'vue'
404
- import { ZiggyVue } from 'ziggy';
405
- import { Ziggy } from './ziggy';
378
+ Now you can use the `route()` function anywhere in your Vue components and templates:
406
379
 
407
- Vue.use(ZiggyVue, Ziggy);
380
+ ```vue
381
+ <a class="nav-link" :href="route('home')">Home</a>
408
382
  ```
409
383
 
410
- If you use this plugin with the `ziggy` import alias shown above, make sure to update the alias to `vendor/tightenco/ziggy/dist/vue.es.js` (Vite) or `vendor/tightenco/ziggy/dist/vue` (Laravel Mix).
411
-
412
- > Note: If you use the `@routes` Blade directive in your views, Ziggy's configuration will already be available globally, so you don't need to import the `Ziggy` config object and pass it into `use()`.
384
+ If you are not using the `@routes` Blade directive, import Ziggy's configuration too and pass it to `.use()`:
413
385
 
414
- Now you can use `route()` anywhere in your Vue components and templates, like so:
386
+ ```js
387
+ import { createApp } from 'vue';
388
+ import { ZiggyVue } from 'ziggy-js';
389
+ import { Ziggy } from './ziggy.js';
390
+ import App from './App.vue';
415
391
 
416
- ```html
417
- <a class="nav-link" :href="route('home')">Home</a>
392
+ createApp(App).use(ZiggyVue, Ziggy);
418
393
  ```
419
394
 
420
- #### React
395
+ If you use the Vue plugin with the `ziggy-js` import alias shown above, make sure to update the alias to `'vendor/tightenco/ziggy/dist/vue.es.js'`.
396
+
397
+ ### React
421
398
 
422
399
  Ziggy includes a `useRoute()` hook to make it easy to use the `route()` helper in your React app:
423
400
 
424
401
  ```jsx
425
- // PostsLink.js
426
402
  import React from 'react';
427
403
  import { useRoute } from 'ziggy-js';
428
- import { Ziggy } from './ziggy';
429
404
 
430
405
  export default function PostsLink() {
431
- const route = useRoute(Ziggy);
406
+ const route = useRoute();
432
407
 
433
408
  return <a href={route('posts.index')}>Posts</a>;
434
409
  }
435
410
  ```
436
411
 
437
- If you make the `Ziggy` config object available globally, you can use the `useRoute()` hook without importing and passing Ziggy's configuration to it every time:
438
-
439
- ```js
440
- // app.js
441
- import { Ziggy } from './ziggy';
442
- globalThis.Ziggy = Ziggy;
443
- ```
412
+ If you are not using the `@routes` Blade directive, import Ziggy's configuration too and pass it to `useRoute()`:
444
413
 
445
414
  ```jsx
446
- // PostsLink.js
447
415
  import React from 'react';
448
416
  import { useRoute } from 'ziggy-js';
417
+ import { Ziggy } from './ziggy.js';
449
418
 
450
419
  export default function PostsLink() {
451
- const route = useRoute();
420
+ const route = useRoute(Ziggy);
452
421
 
453
422
  return <a href={route('posts.index')}>Posts</a>;
454
423
  }
455
424
  ```
456
425
 
457
- > Note: If you include the `@routes` Blade directive in your views, Ziggy's configuration will already be available globally, so you don't need to import the `Ziggy` config object or make it available globally with `globalThis.Ziggy = Ziggy`—you can use the `useRoute()` hook exactly as shown in the `PostsLink.js` example directly above, without any other setup.
458
-
459
- #### SPAs or separate repos
460
-
461
- Ziggy's `route()` helper function is also 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 ziggy-js`.
462
-
463
- To make your routes available on the frontend for this function to use, you can either run `php artisan ziggy:generate` and add the generated routes file to your project, or you can return Ziggy's config as JSON from an endpoint in your Laravel API (see [Retrieving Ziggy's routes and config from an API endpoint](#retrieving-ziggys-routes-and-config-from-an-api-endpoint) below for an example of how to set this up).
464
-
465
- Then, import and use Ziggy as above:
426
+ You can also make the `Ziggy` config object available globally, so you can call `useRoute()` without passing Ziggy's configuration to it every time:
466
427
 
467
428
  ```js
468
429
  // app.js
430
+ import { Ziggy } from './ziggy.js';
431
+ globalThis.Ziggy = Ziggy;
432
+ ```
469
433
 
470
- import route from 'ziggy-js';
471
-
472
- import { Ziggy } from './ziggy';
473
- // or...
474
- const response = await fetch('/api/ziggy');
475
- const Ziggy = await response.json();
434
+ ### SPAs or separate repos
476
435
 
477
- // ...
436
+ Ziggy's `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 ziggy-js`.
478
437
 
479
- route('home', undefined, undefined, Ziggy);
480
- ```
438
+ To make your routes available on the frontend for this function to use, you can either run `php artisan ziggy:generate` and add the generated config file to your frontend project, or you can return Ziggy's config as JSON from an endpoint in your Laravel API (see [Retrieving Ziggy's config from an API endpoint](#retrieving-ziggys-config-from-an-api-endpoint) below for an example of how to set this up).
481
439
 
482
440
  ## Filtering Routes
483
441
 
484
- Ziggy supports filtering the routes it makes available to your JavaScript, which is great if you have certain routes that you don't want to be included and visible in the source of the response sent back to clients. Filtering routes is optional—by default, Ziggy includes all your application's named routes.
442
+ 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.
485
443
 
486
- #### Basic filtering
444
+ > [!IMPORTANT]
445
+ > Hiding routes from Ziggy's 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 Ziggy's output or not.
487
446
 
488
- To set up basic route filtering, create a config file in your Laravel app at `config/ziggy.php` and define **either** an `only` or `except` setting as an array of route name patterns.
447
+ ### Including/excluding routes
448
+
449
+ To set up route filtering, create a config file in your Laravel app at `config/ziggy.php` and add **either** an `only` or `except` key containing an array of route name patterns.
489
450
 
490
451
  > Note: You have to choose one or the other. Setting both `only` and `except` will disable filtering altogether and return all named routes.
491
452
 
@@ -497,7 +458,7 @@ return [
497
458
  ];
498
459
  ```
499
460
 
500
- You can also use asterisks as wildcards in route filters. In the example below, `admin.*` will exclude routes named `admin.login` and `admin.register`:
461
+ You can use asterisks as wildcards in route filters. In the example below, `admin.*` will exclude routes named `admin.login`, `admin.register`, etc.:
501
462
 
502
463
  ```php
503
464
  // config/ziggy.php
@@ -507,7 +468,7 @@ return [
507
468
  ];
508
469
  ```
509
470
 
510
- #### Filtering using groups
471
+ ### Filtering with groups
511
472
 
512
473
  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:
513
474
 
@@ -542,39 +503,27 @@ To expose multiple groups you can pass an array of group names:
542
503
 
543
504
  ## Other
544
505
 
545
- #### TLS/SSL termination and trusted proxies
506
+ ### TLS/SSL termination and trusted proxies
546
507
 
547
508
  <!-- Or: What to do if your app is served over `https` but Ziggy's `route()` helper generates `http` URLs -->
548
509
 
549
- 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, Ziggy may generate URLs with a scheme of `http` instead of `https`, even if your app URL uses `https`. To avoid this happening, set up your Laravel app's `TrustProxies` middleware according to the documentation on [Configuring Trusted Proxies](https://laravel.com/docs/requests#configuring-trusted-proxies).
510
+ 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, 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).
550
511
 
551
- #### Using `@routes` with a Content Security Policy
512
+ ### Using `@routes` with a Content Security Policy
552
513
 
553
- A [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) may block inline scripts, including those output by Ziggy's `@routes` Blade directive. If you have a CSP and are using a nonce to flag safe inline scripts, you can pass the nonce as as the second argument to the `@routes` directive and it will be added to Ziggy's script tag:
514
+ A [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) may block inline scripts, including those output by Ziggy's `@routes` Blade directive. If you have a CSP and are using a nonce to flag safe inline scripts, you can pass the nonce to the `@routes` directive and it will be added to Ziggy's script tag:
554
515
 
555
516
  ```php
556
- // PHP ^8.0
557
517
  @routes(nonce: 'your-nonce-here')
558
-
559
- // PHP <=7.4
560
- @routes(null, 'your-nonce-here')
561
518
  ```
562
519
 
563
- #### Disabling the `route()` helper
520
+ ### Disabling the `route()` helper
564
521
 
565
- If you only want to use the `@routes` directive to make your app's routes available in JavaScript, but don't need the `route()` helper function, set the `skip-route-function` config value to `true`:
522
+ If you only want to use the `@routes` directive to make Ziggy's configuration available in JavaScript, but don't need the `route()` helper function, set the `ziggy.skip-route-function` config to `true`.
566
523
 
567
- ```php
568
- // config/ziggy.php
524
+ ### Retrieving Ziggy's config from an API endpoint
569
525
 
570
- return [
571
- 'skip-route-function' => true,
572
- ];
573
- ```
574
-
575
- #### Retrieving Ziggy's routes and config from an API endpoint
576
-
577
- Ziggy can easily return its config object as JSON from an endpoint in your Laravel app. For example, you could set up an `/api/ziggy` route that looks something like this:
526
+ If you need to retrieve Ziggy's config from your Laravel backend over the network, you can create a route that looks something like this:
578
527
 
579
528
  ```php
580
529
  // routes/api.php
@@ -584,27 +533,12 @@ use Tightenco\Ziggy\Ziggy;
584
533
  Route::get('api/ziggy', fn () => response()->json(new Ziggy));
585
534
  ```
586
535
 
587
- Then, client-side, you could retrieve the config with an HTTP request:
588
-
589
- ```js
590
- // app.js
591
-
592
- import route from 'ziggy-js';
593
-
594
- const response = await fetch('/api/ziggy');
595
- const Ziggy = await response.toJson();
596
-
597
- // ...
598
-
599
- route('home', undefined, undefined, Ziggy);
600
- ```
601
-
602
- #### Re-generating the routes file when your app routes change
536
+ ### Re-generating the routes file when your app routes change
603
537
 
604
- If you're exporting your Ziggy routes as a file by running `php artisan ziggy:generate`, you may want to watch your app's route files and re-run the command automatically whenever they're updated. The example below is a Laravel Mix plugin, but similar functionality could be achieved without Mix. Huge thanks to [Nuno Rodrigues](https://github.com/nacr) for [the idea and a sample implementation](https://github.com/tighten/ziggy/issues/321#issuecomment-689150082)!
538
+ If you are generating your Ziggy config as a file by running `php artisan ziggy:generate`, you may want to re-run that command when your app's route files change. The example below is a Laravel Mix plugin, but similar functionality could be achieved without Mix. Huge thanks to [Nuno Rodrigues](https://github.com/nacr) for [the idea and a sample implementation](https://github.com/tighten/ziggy/issues/321#issuecomment-689150082). See [#655 for a Vite example](https://github.com/tighten/ziggy/pull/655/files#diff-4aeb78f813e14842fcf95bdace9ced23b8a6eed60b23c165eaa52e8db2f97b61).
605
539
 
606
540
  <details>
607
- <summary>Code example</summary>
541
+ <summary>Laravel Mix plugin example</summary>
608
542
  <p></p>
609
543
 
610
544
  ```js
@@ -664,4 +598,4 @@ Please review our [security policy](../../security/policy) on how to report secu
664
598
 
665
599
  ## License
666
600
 
667
- Ziggy is open source software released under the MIT license. See [LICENSE](LICENSE) for more information.
601
+ Ziggy is open-source software released under the MIT license. See [LICENSE](LICENSE) for more information.