Inertia and Translations

Certainly! Handling translations with Inertia, Laravel, and Vue can be a bit tricky—especially to avoid slow first loads or FOUC (Flash of Untranslated Content). Here are some reliable patterns used in the community:

1. Use Laravel as the Truth for Translations

Since your backend is Laravel, you likely already have all your .php or .json language files there. The goal is to share these with your Vue components with minimal overhead. Many developers avoid double-managing translations in both JS and PHP.

2. Share Translations Via Inertia Props

When rendering a page, send only the translations you need as a prop. For example, you might do something like this in your controller:

// ExampleController.php

public function show()
{
    return Inertia::render('ExamplePage', [
        'translations' => [
            'greeting' => __('Welcome'),
            'logout' => __('Logout'),
        ]
    ]);
}

And in Vue:

<template>
  <div>{{ translations.greeting }}</div>
</template>

<script setup>
defineProps(['translations']);
</script>

Pro Tip:

For large sets, you can export entire files:

'translations' => __('messages')

Or use Laravel’s built-in Lang::get('messages').

3. Use Ziggy for Routes + Translations (Optional)

Ziggy helps with route URLs, but for translations, you’ll still want to use the above.

4. Roll Your Own Helper

Some developers publish a route that provides all translations as JSON for the current locale, which you then fetch on boot:

// routes/web.php
Route::get('/translations.js', function () {
    $lang = app()->getLocale();
    $strings = File::get(resource_path("lang/{$lang}.json"));
    return response("window.i18n = $strings;", 200)->header('Content-Type', 'application/javascript');
});

Then in your Vue app (usually app.js):

import { createApp } from 'vue';
import App from './App.vue';

// On page load
window.i18n ||= {};

const app = createApp(App);
app.config.globalProperties.$t = key => window.i18n[key] || key;
app.mount('#app');

And use it like:

{{ $t('welcome') }}

This approach makes all translations instantly available without extra API calls or slowdowns.

5. SPA Mode Caveat

If you’re preloading translations via Inertia props, remember to send them (or reload if the user changes language) on each navigation.

---

Summary

• Small apps: Pass translations as Inertia props.
• Larger apps: Generate a JS file with all translations on boot.
• Don’t double-maintain translations (keep them in Laravel).
• Use a global helper (like $t) for elegance.

---

Community references:

• Sharing Laravel translations with Inertia
• Example: Laravel + Inertia + Vue translations

Let me know if you want a more detailed code example for your setup or a tailored solution for dynamic language switching!