Reload Ziggy @routes via Inertia links without reloading page?

[maxonfjvipon]

Hey there.
My stack is Laravel and React. I use Inertia and mcamara/laravel-localization.
This is my web.php (see here how it works)

Route::prefix(LaravelLocalization::setLocale())
    ->middleware('localizationRedirect')
    ->group(function () {
        // routes
    });

I use @routes directive in Blade. Also on my front-end at layout I have locale switcher:

export const LocaleDropdown = () => {
    const {locales} = usePage().props

    return (
        <Dropdown key="lang-change" arrow trigger={['click']} overlay={
            <Menu>
                {locales.supported.map(locale => (
                    <Menu.Item key={locale}>
                        <Link
                            preserveState
                            preserveScroll
                            method="GET"
                            href={locales.current_localized[locale]}
                            only={['locales']}
                        >
                            {locale.toUpperCase()}
                        </Link>
                    </Menu.Item>
                ))}
            </Menu>
        }>
            <Button>
                Change 
            </Button>
        </Dropdown>
    )
}

Also on front-end I use route helper function for requests.
When I choose a specific locale, I visit to https://host/{locale}/current-path. Actually it's just a reloading current page with new locale. locales is a shared variable, that contains supported locales and current url with those supported locales.

public function share(Request $request): array
    {
        $supported_locales = config('app.supported_locales');
        $current_localized = [];
        foreach ($supported_locales as $locale) {
            $current_localized[$locale] = LaravelLocalization::getLocalizedURL($locale, null, [], true);
        }
        return array_merge(parent::share($request), [
            'locales' => function () use ($current_localized, $supported_locales, $request) {
                return [
                    'current' => app()->getLocale(),
                    'default' => config('app.fallback_locale'),
                    'supported' => $supported_locales,
                    'current_localized' => $current_localized,
                ];
            },
        ]);
    }

When I reload the page via Inertia link with new locale I can see, that interface is translated, BUT if I press some button or link, that uses route function to get route path, I can see, that this path does not contain current locale. For example

1. Current locale - en
2. Interface lang is English
3. console.log(route('register')) // http://host/register
4. Switch locale to es <- visit to http://host/es/current-path <- click <Link href="http://host/es/current-path">es</Link>
5. Now app()->getLocale() - 'es'
6. Interface lang is Spain
7. But console.log(route('register')) is still http://host/register. Should be http://host/es/register.

Only If I press F5 (full page reloading), then route('register') is http://host/es/register.

If instead on Inertia links I use simple <a> links to switch locales, then routes are correct and contain current locale.
Also I tried to remove preserveState and only props - the same.
So it seems to me that Inertia links does not reload @routes directive in app.blade.php. Maybe I'm wrong and there is no connection with directive, but still, I would want to use route function instead of my custom one.

My custom tRoute helper function is below, but I want to get rid of it:

export const useTransRoutes = () => {
    const {locales} = usePage().props

    const tRoute = (name, ...params) => {
        const splitUrl = route(name, ...params).split("/")
        const locale = splitUrl[3] // locale from url

        splitUrl.splice(3, locales.supported.includes(locale) ? 1 : 0)
        if (locales.default !== locales.current) {
            splitUrl.splice(3, 0, locales.current)
        }

        return splitUrl.join('/')
    }

    return {
        tRoute
    }
}

[bakerkretzmar]

Try something like this: #463 (comment)

You may need to move your Ziggy routes into Inertia's shared data so they get reloaded on every request.

[bajki]

Can you provide how to create route mixin with this because if i use page.props.ziggy it dosen't update on change?

[bakerkretzmar]

What is it that doesn't update on change? The list of routes, or something related to the 'current' route?

I think the route mixin would look something like this—basically $page.props.ziggy needs to be the config object:

.mixin({
  methods: {
    route: (route, params, absolute, config = $page.props.ziggy) => route(route, params, absolute, config),
  },
})

If the list of routes needs to get updated on every page load, try not wrapping the ziggy prop in a function in the middleware, so that it's not lazy and gets evaluated on every request. This will technically slow your app down a bit though.

[bajki]

import Vue from "vue";
import {
  App as InertiaApp,
  plugin as InertiaPlugin
} from "@inertiajs/inertia-vue";
import { Link } from "@inertiajs/inertia-vue";
import vuetify from "./plugins/vuetify";
import { InertiaProgress } from "@inertiajs/progress";

Vue.use(InertiaPlugin);
Vue.component("Link", Link);
Vue.mixin({ methods: { route: window.route } });
const app = document.getElementById("app");

new Vue({
  vuetify,
  render: h =>
    h(InertiaApp, {
      props: {
        title: title => `${title} - My App`,
        initialPage: JSON.parse(app.dataset.page),
        resolveComponent: name => require(`./pages/${name}`).default
      }
    })
}).$mount(app);

InertiaProgress.init({ color: "#fff" });

This is my app.js

[bajki]

I managed to do it with mixins.js

import route from 'ziggy-js';

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

app.js

import mixins from "@/mixins/mixins";
Vue.mixin(mixins);

[muhammedkaraoglu]

I found a solution to my own problem. I don't know if I'm doing it right but it worked for me. @maxonfjvipon @bakerkretzmar

app.js

createInertiaApp({
    title: (title) => ` ${title} - ${appName} `,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        const captcheKey = props.initialPage.props.recaptcha_site_key;
        const application = createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(VueReCaptcha, { siteKey: captcheKey })
            .component('Head', Head)
            .component('Link', Link)
            .component('Icon', Icon)
            .mixin({
                methods: {
                   // added here
                    changeLocale: function (locale) {
                        Ziggy.defaults = {
                            locale: locale,
                        };
                    },
                }
            })
            .use(i18nVue, {
                resolve: async lang => {
                    const langs = import.meta.glob('../../lang/*.json');
                    return await langs[`../../lang/${lang}.json`]();
                }
            })
            .use(ZiggyVue, Ziggy);


        application.mount(el);
        return application;
    },
});

Layout.vue

<script>
import { defineComponent } from "vue";
import { loadLanguageAsync } from "laravel-vue-i18n";
export default defineComponent({
  data() {},
  created() {
    loadLanguageAsync(this.$page.props.locale.locale);
    // added here
    this.changeLocale(this.$page.props.locale.locale);
  },
...
<script>