Adding global route helper using groups in Vue Inertia app

[CamKem]

Hello, I'm trying to figure out how I can add the route helper in globally when setting up route grouping in an Inertia, Vue & Laravel application. I removed the @route directive, so I could implement groups in the app. Currently the route helper is available in the template & I have the route list working, but I need to add a way to access the route helper in the script setup (I use the composition api)

I have added 2 groups, auth & guest to the ziggy.php config and then edited the HandleInertiaRequest.php to the following:

public function share(Request $request): array
{
        $desiredGroup = auth()->user() ? 'auth' : 'guest';
        $ziggy = (new Ziggy($desiredGroup))->toArray();
        return array_merge(parent::share($request), [
                'ziggy' => array_merge($ziggy, [
                    'location' => $request->url(),
                ]),
                // rest of the props
       ]
}

Then I edited my app.js / createInertiaApp() to the following:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: async (name) => await resolvePage(name),
    setup({el, App, props, plugin}) {
        const Ziggy = {
            ...props.initialPage.props.ziggy,
            location: props.initialPage.props.url
        }
        return app = createSSRApp({render: () => h(App, props)})
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            //.mixin({
            //    methods: {
            //        route: (name, params, absolute, config = Ziggy) => route(name, params, absolute, Ziggy)
            //    }
            //})
            //.mixin(ziggy)
            .mount(el)
    },
})

I looked at other issues & discussion here on this repo & saw that some people had added mixins to make it available in globally & you can see in the commented out section what I tried, I couldn't get it work.

I can also see that there is an a route helper in the ZiggyVue (which I guess why it's available in the template), but I am lost for how to make it available in the script setup section. I also tried to inject('route') but it said that route was not defined. Please help!

Thanks in advance!

[CamKem]

So injecting the route helper into each components has slightly fixed it in a very messy hackish way. I can now use the route helper in the script setup tags, but not inside of defineProps, defineOptions or defineEmit (not sure why?). I don't need to provide the the route helper, I just need to inject it in the component where it is used.

However I have another issue, the props were not being updated when switching, from to & then back to the original ziggy config group (so guest group => login, 'auth' group => logout, then undefined) Inertia devtools was showing that the ziggy props had been updated but this was not being reflected. The mixin I added actually fixes this (again, not sure why?) - I had to use the node package to be able to import the route helper because there is no export called route in the ZiggyVue package as far as I can work out?

This is the mixin:

import route from 'ziggy-js';

export default {
    methods: {
        route(name, params, absolute, config = this.$page.props.app.ziggy) {
            return route(name, params, absolute, config)
        },
    },
};

There must be a better way to handle this in the app.js file that providers the route helper globally, updates the route groups & doesn't need to use the additional package to do this? I mean surely the route grouping feature would not have been implemented without the ability to utilise it without needing to use the @routes blade directive for the route helper as that kind of defeats the purpose.

I'm hoping that someone smarter than me can help me work out how I can achieve this just using the ZiggyVue package in the app.js file. Thanks!

[bakerkretzmar]

Injecting route in every component is the only way to make it available if you're using the composition API. You can also keep @routes in your root template and then it'll be available globally, but your IDE might complain about that.

If you need the available routes to change on every navigation event then you'll have to either set up your own route function, as you've done, or listen for Inertia's navigation events and manually update the global Ziggy config. Try this too: #567

The simplest option here is probably for you not to use the Vue plugin and to just do what the Vue plugin is doing yourself (so use the route function wrapper you've got above and provide it globally yourself). You can import the route function from the PHP package, see the advanced section of the readme (where you import it from depends on your build tooling).

Not sure why it doesn't work in defineProps etc, but I think Vue compiles those away somehow but it might just not be possible currently.

Let me know if any of that helps!