<?php
return [
'name' => 'Laravel Lang Sync Inertia',
'description' => 'Effortlessly synchronize server-side Laravel language files with Inertia frontend components.',
'features' => 'Zero API endpoints, dynamic locale switching, and full SSR hydration.',
'welcome' => 'Welcome to :app, :name!',
'languages' => 'Supporting 1 language|Supporting :count languages',
];<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Inertia\Response;
class DashboardController extends Controller
{
public function index(): Response
{
// Sync package translations for the active locale
syncLangFiles('app');
return Inertia::render('Dashboard');
}
}<script setup>
import { vueLang } from '@erag/lang-sync-inertia';
const { trans, __, transChoice } = vueLang();
</script>
<template>
<section class="package-preview">
<h1>{{ __('app.name') }}</h1>
<p>{{ __('app.description') }}</p>
<p>{{ trans('app.welcome', { app: 'Laravel', name: 'Developer' }) }}</p>
<p>{{ transChoice('app.languages', 12) }}</p>
</section>
</template>import { reactLang } from '@erag/lang-sync-inertia';
export default function Dashboard() {
const { trans, __, transChoice } = reactLang();
return (
<section className="package-preview">
<h1>{__('app.name')}</h1>
<p>{__('app.description')}</p>
<p>{trans('app.welcome', { app: 'Laravel', name: 'Developer' })}</p>
<p>{transChoice('app.languages', 12)}</p>
</section>
);
}<script module lang="ts">
import { svelteLang } from '@erag/lang-sync-inertia';
const { trans, __, transChoice } = svelteLang();
</script>
<section class="package-preview">
<h1>{__('app.name')}</h1>
<p>{__('app.description')}</p>
<p>{trans('app.welcome', { app: 'Laravel', name: 'Developer' })}</p>
<p>{transChoice('app.languages', 12)}</p>
</section>Laravel Lang Sync Inertia
Effortlessly synchronize server-side Laravel language files with Inertia frontend components.
Welcome to Laravel, Developer!
Supporting 12 languagesUse server-side language files in Vue, React, and Svelte pages without custom JSON endpoints or repeated prop wiring.
Load selected Laravel language files for a page and make them available to the frontend through Inertia.
Use dedicated Vue, React, and Svelte helpers from the package root with consistent behavior.
Replace dynamic values in translated strings using the same placeholder style your Laravel app already uses.
Keep older placeholder formats working while gradually moving translation lines to the Laravel convention.
Render the right translation for zero, singular, and plural counts using Laravel-style interval rules.
Show the original text when a translation key is unavailable, so pages fail gracefully during development.
Read translations from the active Laravel locale so frontend pages follow the same language as the backend.
Organize large translation sets in nested Laravel language directories and resolve them from frontend helpers.
Share several language files together when a page needs copy from multiple translation groups.
Expose translations on the shared Inertia page data so nested components can read them without prop drilling.
Generate frontend-ready JSON files from PHP lang files, then load the exported JSON automatically.
Typed Vue and React helpers give autocomplete for common translation calls.
The backend chooses the translation files for the current route, Inertia shares them with the page, and the frontend helpers resolve text for Vue, React, or Svelte components.
Keep translations in Laravel and select only the groups a page needs.
The package places translated data into the page payload using Laravel's active locale.
Frontend helpers read the shared data and handle replacements, pluralization, and fallbacks.
Laravel Lang Sync Inertia is an open-source package built to bridge the translation gap in hybrid Inertia.js architectures. Instead of writing custom JSON endpoints or copying translations manually to your frontend directory, it automates localization file syncing. The package loads, parses, and formats your existing server-side PHP array translations into lightweight frontend modules. With ready-to-use helpers for Vue, React, and Svelte, your client-side views stay perfectly synchronized with Laravel's active locale dynamically.
Find answers to common questions about Laravel Lang Sync Inertia, performance, SSR, and frontend integrations.
While you can manually pass translation objects through Inertia middleware, sharing entire language files bloats every Inertia page payload and slows down initial page loads. Laravel Lang Sync Inertia selectively loads only the files required for the current route, automatically detects the active locale, resolves nested directories, and provides zero-overhead frontend helpers for Vue 3, React, and Svelte.
Yes, full Inertia SSR support is built-in. Translations are resolved and injected into shared Inertia page props on the Laravel server before the frontend SSR bundle executes. This ensures your server-rendered HTML contains the correct translated strings and hydrates seamlessly in the browser with zero flash of untranslated content (FOUC).
The package automatically detects Laravel's dynamic runtime locale (configured via App::setLocale() or your custom locale middleware). When a user updates their language, Inertia reloads the page props with the new locale's translation keys, and frontend hooks update the UI reactively.
Yes. It mirrors Laravel's native translation engine completely across Vue, React, and Svelte:
trans('auth.welcome', { name: 'John' }).transChoice('cart.items', count).Yes. The package includes an Artisan export command (php artisan lang:sync-export) that pre-compiles PHP translation files into static JSON assets, eliminating disk I/O and reducing server memory usage under high traffic.
Yes. You can structure language files in subdirectories (such as lang/en/admin/settings.php). You can sync them by path (e.g. syncLangFiles('admin/settings')) and reference them seamlessly using dot notation (e.g. __('admin.settings.title')).
Yes. The frontend package @erag/lang-sync-inertia is written in TypeScript and provides complete type definitions. Helpers like vueLang(), reactLang(), and svelteLang() offer typed signatures for translation keys, replacement parameters, and plural counts.
The package implements a safe two-tier fallback strategy:
'en' in config/app.php).'messages.welcome') rather than throwing an exception.Yes. Laravel Lang Sync Inertia natively parses both standard PHP array translation files (lang/{locale}/*.php) and root JSON localization files (lang/{locale}.json) frequently used in modern Laravel projects.
Installation takes less than two minutes via Composer and npm:
composer require eramitgupta/laravel-lang-sync-inertianpm install @erag/lang-sync-inertiaThen call syncLangFiles('auth') in your controller and use vueLang(), reactLang(), or svelteLang() in your frontend components.