Share routes with front frameworks like Inertia/VueJS

[kira0269]

Hello !

Is it possible to generate routes correctly with Inertia using your package ?

With Inertia, the Ziggy library is used. After debugging, my route list contains for example:

• en.
• en.dashboard
• en.list.
• ...

And calling route('dashboard') function in inertia does not work.

[ivanvermeyen]

Hi,

This package overrides Laravel's UrlGenerator to apply the locale prefix to the requested route name. I haven't used inertia yet, but I can see that Ziggy uses a JS route() helper. I can't really tell however how they get the routes from the backend to the frontend...

I assume that the JS helper doesn't use the backend, thus the locale prefix isn't applied.

[cv-chameleon]

@kira0269

Your problem is quite easy to fix.

In your app.js you need to add a mixin, for example "$route", which passes your locale (you can pass add this to your props in HandleInertiaRequests), to the default route function.

VueApp .use(plugin).mixin({ methods: { $route: (name, params, absolute, config) => route(${usePage().props.locale}.${name}, params, absolute, config) } }).mount(el) return VueApp;

Then in your Vue components, instead of using route('homepage'), you now use $route('homepage'), which will be transformed to for example route('en.homepage').

[Baspa]

I am currently using React with Inertia. I use the react-i18n-next for the translations package to translate strings in the frontend. When using the route() helper from Ziggy I get the translation like this:

...
import { useTranslation } from "react-i18next";

export default () => {
    const { i18n } = useTranslation();

    const localizedRoute = route(i18n.language + ".index");

    return (
        <>

        </>
    );
}

The React package knows exactly which translation is being used so it always shows the correct localized route.

[desaintflorent]

How I solved it with vuejs inertiajs + ssr following @cv-chameleon help

//HandleInertiaRequests.php
//...
 return [
    ...parent::share($request),
    'locale' => App::currentLocale(),
    'auth' => [
        'user' => $request->user(),
    ],
    'ziggy' => fn () => [
        ...(new Ziggy)->toArray(),
        'location' => $request->url(),
    ],
];

//app.js
import { createInertiaApp, usePage } from "@inertiajs/vue3";
//...
.mixin({
    methods: {
        $route: (name, params, absolute, config) =>
            route(
                `${usePage().props.locale}.${name}`,
                params,
                absolute,
                config
            ),
    },
})

//ssr.js
import { route, ZiggyVue } from "../../vendor/tightenco/ziggy";
//...
setup({ App, props, plugin }) {
    const Ziggy = {
        ...page.props.ziggy,
        location: new URL(page.props.ziggy.location),
    };

    return createSSRApp({ render: () => h(App, props) })
        .use(plugin)
        .mixin({
            methods: {
                $route: (name, params, absolute, config = Ziggy) =>
                    route(
                        `${page.props.locale}.${name}`,
                        params,
                        absolute,
                        config
                    ),
            },
        })
        .use(ZiggyVue, Ziggy);
},