Introduction

Laravel Lang Sync Inertia is a Laravel package that bridges your backend translation files with your Inertia.js frontend. Load any language file in a controller and access it instantly in Vue, React, or Svelte without manually passing props.

It allows Laravel language files to be shared automatically through Inertia, so your frontend can use translations with a small API instead of manually wiring props on every response.

This is useful when your project already stores translations in Laravel language files and you want the same source of truth across backend and frontend screens. Instead of duplicating translation logic, the package lets Laravel stay in control while Inertia delivers the shared data to your client-side pages.

The overall goal is simple: keep your translation workflow native to Laravel, but make the translated content immediately available inside your Vue, React, or Svelte components.

Features

• Automatic translation sharing via Inertia.js middleware
• Load single or multiple language files with one call
• Load nested language directories via dot notation
• Dynamic placeholder replacement with Laravel-style :name syntax
• Works with Vue 3, React, and Svelte 5
• Auto-switches locale folder based on Laravel's current locale
• Export PHP language files to frontend-ready JSON
• Clean helper API with trans() and __()

How It Works

When you call syncLangFiles('auth') in your controller:

1. Laravel reads lang/{locale}/auth.php based on App::getLocale().
2. The translation array is shared with Inertia under page.props.lang.
3. Your frontend helper reads from page.props.lang.
4. Keys like auth.greeting resolve automatically.
5. Placeholders like :name are replaced at runtime with the values you pass.

Controller -> syncLangFiles('auth')
Laravel reads -> lang/en/auth.php
Inertia shares -> page.props.lang.auth
Frontend -> __('auth.greeting') or trans('auth.welcome', { name: 'Amit' })
Output -> Hello! / Welcome, Amit!

Nested language directories work the same way. For example, syncLangFiles('admin.auth') reads lang/{locale}/admin/auth.php and lets the frontend resolve keys like __('admin.auth.name').

Supported use cases:

• single or multiple language file loading
• nested language directory loading via dot notation
• Vue 3, React, and Svelte 5 apps
• placeholder replacement with :name values
• locale-based loading from Laravel's current app locale
• optional JSON export for frontend-ready files