Laravel Inertia JS Vue 3 - Ziggy Routes

I would like to understand Ziggy routes a bit more in terms of generating the static ziggy js file.

We have a large routes file and i can see that routes are generated on the fly when the app is being used. This is putting load of the application in production.

I would like to know if there is a better way to use routes and how from the static Ziggy.js routes file.

I would like to remove all the generated routes when i view source and to not expose all that information.

If anyone has a solution within resources\app.js that they can share i would appreciate it.

Thanks

Sinnbeck

1 year ago

Level 102

Its in the docs here https://github.com/tighten/ziggy?tab=readme-ov-file#generating-and-importing-ziggys-configuration

So run

php artisan ziggy:generate

then create a wrapper for routes in a file. Eg. routing.js

import { route } from '../../vendor/tightenco/ziggy';
import { Ziggy } from './ziggy.js';
export function router(name, params = undefined, absolute = undefined) {
    return route(name, params, absolute,, Ziggy);
}

You can now use the wrapper in your code. Give it a different name if wanted

import {router} from 'routing.js'

//and then
router('some-route', {id: user.id})

1 like

jackkitley

1 year ago

Level 1

@Sinnbeck Thank you for your reply. Is this the recommended way to use ziggy routes in production? i think it may help quite a bit but i dont think its widely known to do it this way. Alot rely on it being generated server side and passed through.

Sinnbeck

1 year ago

Level 102

@jackkitley To be honest I cannot say what the recommended way is as it isnt documented. I personally just pass it into the page as in the first examples in the docs. But then again I dont have a problem with the routes being in the DOM. But if I wanted to load them in the browser instead, I would do it the way I explained it above. Just be aware that no matter what, your routes are still exposed. In js they are just harder to find.

1 like

Please or to participate in this conversation.