Laravel Lang Sync Inertia

Laravel Lang Sync InertiaLaravel translations for your Inertia frontend

Sync Laravel lang files once, then use clean Vue, React, and Svelte helpers for keys, replacements, pluralization, and direct string fallback.

Laravel

InertiaJs

Vue

React

TypeScript

Laravel Lang Sync Inertia

↔

Laravel sync

Call `syncLangFiles()` in a controller and share selected Laravel lang files with the Inertia page.

◆

Vue, React and Svelte

Use dedicated Vue, React, and Svelte entry points with the same helper names and behavior.

⌘

Key replacement

Use Laravel-style replacements like `Welcome, :name` with `__()` or `trans()`.

♢

Legacy placeholders

Existing strings like `Welcome, {name}` keep working while you move to Laravel-style placeholders.

∑

Pluralization

Use `transChoice()` or `trans_choice()` with Laravel intervals like `{0}`, `{1}`, and `[2,*]`.

↵

Direct strings

Calls like `__("I love programming.")` return the original text when no key is found.

◐

Locale aware

Translations are loaded from `lang/{locale}` using Laravel’s current application locale.

▣

Nested directories

Load files like `lang/en/admin/auth.php` with `syncLangFiles("admin.auth")` and resolve `__("admin.auth.name")`.

⊕

Multiple files

Sync route-level groups like `syncLangFiles(["admin.auth", "auth"])` before rendering the Inertia page.

◫

Shared lang prop

Translations are exposed through `page.props.lang`, so components can read them without manual props.

⇪

JSON export

Generate frontend-ready JSON files from PHP lang files, then load the exported JSON automatically.

✓

TypeScript ready

Typed Vue and React helpers give autocomplete for common translation calls.

Quick example

The backend decides which language files should be available for the page. After that, your frontend can read translations with a very small API.

Call syncLangFiles() in the controller.
Keep translations in Laravel language files.
Use lang() in Vue, React, or Svelte.
Render translations with __() or trans().

php

<?php
namespace App\Http\Controllers;

use Inertia\Inertia;
use Inertia\Response;

class DashboardController extends Controller
{
    public function index(): Response
    {
        syncLangFiles('auth');

        return Inertia::render('Dashboard');
    }
}

php

<?php

return [
    'greeting' => 'Welcome back',
    'welcome' => 'Welcome, :name',
];

vue

<script setup>
import { lang } from '@erag/lang-sync-inertia/vue';

const { __, trans } = lang();
</script>

<template>
    <h1>{{ __('auth.greeting') }}</h1>
    <p>{{ trans('auth.welcome', { name: 'Amit' }) }}</p>
</template>

tsx

import { lang } from '@erag/lang-sync-inertia/react';

export default function Dashboard() {
    const { __, trans } = lang();

    return (
        <section>
            <h1>{__('auth.greeting')}</h1>
            <p>{trans('auth.welcome', { name: 'Amit' })}</p>
        </section>
    );
}

svelte

<script module lang="ts">
import { lang } from '@erag/lang-sync-inertia/svelte';

const { __, trans } = lang();
</script>

<section>
    <h1>{__('auth.greeting')}</h1>
    <p>{trans('auth.welcome', { name: 'Amit' })}</p>
</section>

Nested Laravel language directories are also supported:

php

syncLangFiles('admin.auth');

This reads lang/{locale}/admin/auth.php, then your frontend can call:

ts

__('admin.auth.name');

Translation Syncing Made Simple

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.

Frequently Asked Questions

Why use this package over manual prop sharing?

While you can manually pass translation objects through Inertia middleware, doing so for entire language libraries can result in massive payload sizes. This package handles automatic dynamic syncing, locale matching, legacy placeholder fallbacks, and localized frontend hooks efficiently without manual setup.

How does locale determination work?

The package automatically respects Laravel's dynamic runtime locale. When you update the locale via app()->setLocale() on the server, the corresponding lang files will be dynamically loaded and shared with Inertia frontend hooks on the next render cycle.

Can I bundle translations for production caching?

Yes. The package includes artisan exporter commands to compile PHP translation files into JSON assets, allowing them to be cached in the browser or via Service Workers for offline capabilities.

Does it support pluralization and replacements?

Absolutely. It implements full pluralization interval support (using transChoice helper rules) and parameter replacement matching standard Laravel behavior in Vue, React, and Svelte.