Laravel Lang Sync InertiaLaravel translations, instantly available in Inertia Vue and React apps

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.
• Use lang() in Vue or React.
• Render translations with __() or trans().

<?php
namespace App\Http\Controllers;

use Inertia\Inertia;
use Inertia\Response;

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

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

<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>

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>
  )
}

Packages ​

Choose the package you want to install first.

composer require erag/laravel-lang-sync-inertia

php artisan lang:publish

php artisan erag:install-lang

npm install @erag/lang-sync-inertia

Why use it ​

Laravel Lang Sync Inertia connects Laravel translation files to your Inertia frontend without manually passing props in every response.

This package is useful when:

• your translations already live in Laravel lang files
• your frontend is built with Inertia.js
• you want the same translation flow in Vue and React
• you need placeholder replacement without custom glue code