What is the purpose of including ziggy in HandleInertiaRequest shared data?

[guilheb]

In the base Laravel Jetstream and Breeze stubs, we can see that the share method includes ziggy data. What is the purprise of this, since the Ziggy object doesn't seem to be updated with that shared data? Am I missing something?

[bakerkretzmar]

You're not missing anything, I think for SSR that might be required but in general out of the box it isn't. It should probably be removed from those stubs, I've been meaning to test it out and make that PR for a while.

[guilheb]

Have you thought about having a mode where the info from that shared data would update the Ziggy object? Obviously I’m thinking of the routes. Like many others, I’m not comfortable having all routes publicly displayed in the source code for the whole world to see, even if they are protected by middlewares, permissions, etc.

The most simple use case is allowing routes from a guest group initially, which only contains routes related to login, registration, etc. Once the user is logged in, then all routes can be made available. This is easy to do in HandleInertiaRequest, the hard part is in JS.

I tried mixins and app.provide as suggested in other answers, but they don’t work when using <script setup>.

I also tried updating the Ziggy.routes object using Inertia router events, but it seems that the first component loaded after new routes are shared can’t see them.

I worked on this for hours and hours (not a JavaScript ninja) and the only way I could achieve this is by forking the repo and changing src/js/vue.js for this:

import { usePage } from '@inertiajs/vue3';

const r = (name, params, absolute, config = options) => {
    config = config ?? usePage().props?.ziggy; // <— this
    route(name, params, absolute, config);
};

It’s probably not the best way to do it, but I’m wondering how hard it would be to implement?

[bakerkretzmar]

I tried mixins and app.provide as suggested in other answers, but they don’t work when using <script setup>.

Can you be more specific? provide/inject works fine with script setup, what issues were you running into?

Your snippet there is on the right track, basically you have to make sure that every call to route() is using the 'current' Ziggy config and not whatever it was initially loaded with. Try updating globalThis.Ziggy on Inertia navigation events instead of just Ziggy. Otherwise a custom route() function is the way to go, you don't have to fork Ziggy you can just use what you have there but in your own app code, and then use your route() function everywhere instead of Ziggy's. See #652 (reply in thread) and #567 if you haven't already.

The simplest and recommended solution though is to just use @routes.

[guilheb]

Can you be more specific? provide/inject works fine with script setup, what issues were you running into?

Correct me if I’m wrong but that technique means that the router function needs to be injected in all components. Which is less convenient for an existing site.

Your snippet there is on the right track, basically you have to make sure that every call to route() is using the 'current' Ziggy config and not whatever it was initially loaded with. Try updating globalThis.Ziggy on Inertia navigation events instead of just Ziggy. Otherwise a custom route() function is the way to go, you don't have to fork Ziggy you can just use what you have there but in your own app code, and then use your route() function everywhere instead of Ziggy's. See #652 (reply in thread) and #567 if you haven't already.

I did read those threads (and many others) carefully before posting here. Thanks for the pointers. It would just be nice if there would be a built-in way to do it. I wish I could help (my specialty is PHP). Thanks.

[bakerkretzmar]

that technique means that the router function needs to be injected in all components

Yes, kind of. Ziggy's Vue plugin makes route() available in all your component <template>s, so if you're only using it in that part of a component you don't need to import anything, it should just work. To use it inside <script setup> yeah you would need to import or inject() it every time, which I agree is super annoying, but that's a Vue thing not a Ziggy thing. There's no this or anything available in <script setup>, I would really love to make it magically available there without importing anything, and I tried, but we just can't.

Using @routes solves this problem though, because it makes route() available to the entire page, including inside <script setup> anywhere you happen to be using it.

[guilheb]

That’s indeed what I have noticed by trial and error. Because I’m using <script setup> and didn’t want to import/inject everywhere, I couldn’t see any other way than forking and customizing my own route() function.

I’m sure I’m not the only one who would really appreciate being able to keep Ziggy routes in sync with those returned by HandleInertiaRequest without jumping through hoops 😇