May 29, 2019 3 min read
How I Like to Simplify Ziggy’s Route Helper
If you’re not already familiar with Tighten’s package Ziggy, it makes it simple to use the routes you define in Laravel in your JavaScript.
Curtis Blackwell
Manager, Digital Product Delivery

If you’re not already familiar with Tighten’s package Ziggy, it makes it simple to use the routes you define in Laravel in your JavaScript. It’s a great package, but I prefer to use it a little differently than they outline in their docs.
All I really want from Ziggy is to be able to use a helper in my JS to get a URL, the exact same way as Laravel’s route
helper. For example, if I want the URL for an API endpoint that lists all users, I just want to drop route('api.user.show', [userId])
in my JavaScript to get /api/users/1
back.
I want not to do any of the following:
Use the
@routes
Blade directive (perhaps a bit purist of me, but I don’t like how it dumps all the route info as inline JavaScript).Commit compiled files to git (the route helper returns absolute URLs with your
APP_URL
leading the way).Call any other methods Ziggy’s
route
helper provides.
Thankfully, configuring things as I prefer is fairly straightforward. All I did was:
update my node scripts to use Ziggy’s Artisan command,
add the output file to my
.gitignore
, anddefine my own
route
helper that relies on Ziggy’s.
1. Tweak yer scripts.
Laravel’s default package.json
looks something like this:
I need a routes file generated separately in all environments before compiling my JavaScript, so I added a script for that and call it in my development
and production
scripts.
2. Withhold attention.
.gitignore
:
/resources/js/routes.js
¯\(ツ)/¯
3. Tell that route helper what’s up.
global-helpers.js
:
The generated routes.js
exports the routes in an object named Ziggy
, which is what we’re importing on line 2 and passing as the 4th argument to ZiggyRoute()
. The third argument tells Ziggy whether to use absolute URLs.
In app.js
, I can just drop import 'global-helpers';
in and call my stripped-down route
helper anywhere.
NOTE: I’ve got this in my webpack.mix.js
(lets me import from vendor
):
That’s it.
If you run into snags with ESLint or Jest, hit me up and I can share more of the less-directly-relevant setup.