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 +171 -237
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.m.js +1 -1
- package/dist/react.es.js +1 -1
- package/dist/react.js +1 -1
- package/dist/react.m.js +1 -1
- package/dist/vue.es.js +1 -1
- package/dist/vue.js +1 -1
- package/dist/vue.m.js +1 -1
- package/package.json +13 -7
- package/src/js/index.d.ts +33 -24
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-

|
|
2
2
|
|
|
3
3
|
# Ziggy – Use your Laravel routes in JavaScript
|
|
4
4
|
|
|
@@ -8,146 +8,133 @@
|
|
|
8
8
|
[](https://npmjs.com/package/ziggy-js)
|
|
9
9
|
[](https://npmjs.com/package/ziggy-js)
|
|
10
10
|
|
|
11
|
-
Ziggy provides a JavaScript `route()`
|
|
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
|
-
- [
|
|
18
|
-
- [
|
|
17
|
+
- [`route()` function](#route-function)
|
|
18
|
+
- [`Router` class](#router-class)
|
|
19
19
|
- [Route-model binding](#route-model-binding)
|
|
20
20
|
- [TypeScript](#typescript)
|
|
21
|
-
- [**
|
|
22
|
-
- [
|
|
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
|
-
- [
|
|
28
|
-
- [Filtering
|
|
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
|
|
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
|
-
|
|
47
|
+
### `route()` function
|
|
47
48
|
|
|
48
|
-
Ziggy's `route()`
|
|
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
|
-
|
|
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
|
-
|
|
61
|
+
#### Parameters
|
|
65
62
|
|
|
66
63
|
```php
|
|
67
|
-
|
|
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
|
-
|
|
73
|
+
#### Multiple parameters
|
|
81
74
|
|
|
82
75
|
```php
|
|
83
|
-
|
|
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
|
-
//
|
|
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
|
-
|
|
85
|
+
#### Query parameters
|
|
96
86
|
|
|
97
|
-
|
|
98
|
-
// routes/web.php
|
|
87
|
+
Ziggy adds arguments that don't match any named route parameters as query parameters:
|
|
99
88
|
|
|
100
|
-
|
|
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
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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/
|
|
101
|
+
// 'https://ziggy.test/venues/1/events/2?page=5&count=10'
|
|
113
102
|
```
|
|
114
103
|
|
|
115
|
-
If you
|
|
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.
|
|
119
|
-
|
|
120
|
-
|
|
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/
|
|
115
|
+
// 'https://ziggy.test/venues/1/events/2?event=3&page=5'
|
|
127
116
|
```
|
|
128
117
|
|
|
129
|
-
Like Laravel
|
|
118
|
+
Like Laravel, Ziggy automatically encodes boolean query parameters as integers in the query string:
|
|
130
119
|
|
|
131
120
|
```js
|
|
132
|
-
route('events.
|
|
133
|
-
|
|
134
|
-
|
|
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/
|
|
129
|
+
// 'https://ziggy.test/venues/1/events/2?draft=0&overdue=1'
|
|
141
130
|
```
|
|
142
131
|
|
|
143
|
-
|
|
132
|
+
#### Default parameter values
|
|
144
133
|
|
|
145
|
-
|
|
134
|
+
Ziggy supports default route parameter values ([Laravel docs](https://laravel.com/docs/urls#default-values)).
|
|
146
135
|
|
|
147
136
|
```php
|
|
148
|
-
|
|
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
|
-
|
|
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
|
-
|
|
160
|
+
### `Router` class
|
|
174
161
|
|
|
175
|
-
Calling Ziggy's `route()`
|
|
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
|
-
|
|
164
|
+
#### Check the current route: `route().current()`
|
|
178
165
|
|
|
179
166
|
```js
|
|
180
|
-
//
|
|
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
|
-
|
|
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
|
-
//
|
|
193
|
-
// Current window URL is https://myapp.com/
|
|
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.
|
|
196
|
-
route().current('events.
|
|
197
|
-
route().current('events.
|
|
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
|
-
|
|
188
|
+
#### Check if a route exists: `route().has()`
|
|
201
189
|
|
|
202
190
|
```js
|
|
203
|
-
//
|
|
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
|
-
|
|
197
|
+
#### Retrieve the current route params: `route().params`
|
|
210
198
|
|
|
211
199
|
```js
|
|
212
|
-
//
|
|
213
|
-
// Current window URL is https://myapp.com/
|
|
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; // {
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
238
|
-
|
|
239
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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: '
|
|
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
|
-
|
|
260
|
+
### TypeScript
|
|
289
261
|
|
|
290
|
-
Ziggy includes TypeScript type definitions, and
|
|
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
|
|
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
|
|
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
|
-
##
|
|
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
|
-
|
|
303
|
+
```bash
|
|
304
|
+
php artisan ziggy:generate
|
|
305
|
+
```
|
|
323
306
|
|
|
324
|
-
|
|
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
|
|
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
|
-
|
|
333
|
-
|
|
334
|
-
|
|
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
|
-
|
|
334
|
+
### Importing the `route()` function
|
|
341
335
|
|
|
342
|
-
|
|
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
|
-
|
|
339
|
+
import route from '../../vendor/tightenco/ziggy';
|
|
340
|
+
import { Ziggy } from './ziggy.js';
|
|
356
341
|
|
|
357
|
-
|
|
358
|
-
|
|
342
|
+
route('home', undefined, undefined, Ziggy);
|
|
343
|
+
```
|
|
359
344
|
|
|
360
|
-
|
|
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
|
-
|
|
366
|
-
|
|
347
|
+
```js
|
|
348
|
+
// vite.config.js
|
|
367
349
|
|
|
368
|
-
|
|
350
|
+
export default defineConfig({
|
|
369
351
|
resolve: {
|
|
370
352
|
alias: {
|
|
371
|
-
ziggy: path.resolve('vendor/tightenco/ziggy
|
|
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
|
-
|
|
360
|
+
Now your imports can be shortened to:
|
|
378
361
|
|
|
379
362
|
```js
|
|
380
|
-
|
|
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
|
-
|
|
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
|
|
398
|
-
import App from './App';
|
|
372
|
+
import { ZiggyVue } from 'ziggy-js';
|
|
373
|
+
import App from './App.vue';
|
|
399
374
|
|
|
400
|
-
createApp(App).use(ZiggyVue
|
|
375
|
+
createApp(App).use(ZiggyVue);
|
|
376
|
+
```
|
|
401
377
|
|
|
402
|
-
|
|
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
|
-
|
|
380
|
+
```vue
|
|
381
|
+
<a class="nav-link" :href="route('home')">Home</a>
|
|
408
382
|
```
|
|
409
383
|
|
|
410
|
-
If you
|
|
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
|
-
|
|
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
|
-
|
|
417
|
-
<a class="nav-link" :href="route('home')">Home</a>
|
|
392
|
+
createApp(App).use(ZiggyVue, Ziggy);
|
|
418
393
|
```
|
|
419
394
|
|
|
420
|
-
|
|
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(
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
520
|
+
### Disabling the `route()` helper
|
|
564
521
|
|
|
565
|
-
If you only want to use the `@routes` directive to make
|
|
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
|
-
|
|
568
|
-
// config/ziggy.php
|
|
524
|
+
### Retrieving Ziggy's config from an API endpoint
|
|
569
525
|
|
|
570
|
-
|
|
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
|
-
|
|
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
|
|
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>
|
|
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
|
|
601
|
+
Ziggy is open-source software released under the MIT license. See [LICENSE](LICENSE) for more information.
|