How are you handling Laravel config/constants/translations in Vue with Inertia at scale
I’m working with Laravel + Inertia + Vue 3 and I’m struggling with how to properly expose backend data like config values, constants, and translations to the frontend in a scalable way.
Using HandleInertiaRequests::share() for everything feels wrong once the app grows. The payload gets bigger, everything is sent on every request, and it turns into a dumping ground for global data. Accessing it in Vue via usePage() also becomes messy.
I recommend moving translations to the frontend, or rather the translations that are used there. I don't use Vue, but in React I've used react-i18next, which is ok. It has some nice features that Laravel's translator doesn't have, like safely embedding HTML tags. There are probably similar packages for Vue.
As for constants and config, how much data are you sending with every request? You should only pass a prop globally with share() if it's needed on every page. Everything else should be passed from the controller when needed in Inertia::render().
Most likely, you're still sending way less data during navigation than is sent in a traditional app, where the entire HTML is populated on the server. So it's probably not an issue.
As I have many configs files and constants files with huge number of keys and also I don't want to pass them from controller every time I need to use the key and accept those as a prop and use it.
It will be like overwork and headaches.
Do you actually need all of those props in the frontend? Passing tons of configuration to every page is suspicious and feels like a code smell to me.
If you really need all of them, you don't have to send them on every request. You could, for example, pass them during the initial page load and keep them in localStorage:
In the Inertia middleware, check if the request is from Inertia ($request->inertia()). If it's not, share the configuration and constants in a config prop.
On the frontend, check if config exists in the page props. If it does, store it in localStorage. If not, pull the previously fetched values from localStorage.
That's just one solution. But I'd first consider if I truly need all of it and if there's a better way of doing things. I've never needed anything like that.
I just checked the app I'm currently working on: it's a fairly big app with 650 routes, and it only uses 18 global inertia props.
