Open kira0269 opened 1 year ago
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.
@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')
.
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.
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);
},
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:
And calling route('dashboard') function in inertia does not work.