🌐 Laravel Easy Translation Sync with Inertia (Vue.js / React)

Laravel Lang Sync Inertia helps you add different languages to your Laravel app with Vue or React. It makes translations easy!

✨ Features

• ⚙️ Inertia.js integration with automatic sharing
• 📂 Load single or multiple language files
• 🔄 Dynamic replacement support in translations
• 🧩 Supports both Vue.js and React
• 🧵 Built-in middleware for automatic sharing
• 🛠️ Helper functions like trans() and __() for frontend usage
• 🌍 Automatically switches language folder based on current Laravel locale
• 🆕 Generate frontend-ready JSON language files via Artisan command

📦 Installation

To install the package, run the following command via Composer:

composer require erag/laravel-lang-sync-inertia

🛠️ Publish Configuration & Composables

To publish the configuration and composables, run:

php artisan erag:install-lang

⚠️ Required for Frontend (Vue/React)

To use translations on your frontend, 📦 you must install the NPM companion package:

npm install @erag/lang-sync-inertia

📘 Full frontend documentation: ➡ https://www.npmjs.com/package/@erag/lang-sync-inertia

🚀 Usage Guide: syncLangFiles()

The syncLangFiles() function is a Laravel helper provided by this package. Use it inside your controller methods to load translation files and automatically share them with your Vue or React frontend via Inertia.js.

✅ Think of syncLangFiles() as a bridge between Laravel’s backend translations and your Inertia-powered frontend.

🧠 How to Use

// Load and sync a single translation file
syncLangFiles('auth');

// Load and sync multiple translation files
syncLangFiles(['auth', 'validation', 'pagination']);

✅ Supported Inputs

The syncLangFiles() function supports:

• A string: For a single translation file → syncLangFiles('auth')

• An array of strings: For multiple translation files → syncLangFiles(['auth', 'validation'])

🧪 How It Works

Suppose you have the following language file:

📁 resources/lang/en/auth.php

return [
    'welcome' => 'Welcome, {name}!',
    'greeting' => 'Hello!',
];

Now, you want to show auth.welcome and auth.greeting on the frontend using Vue or React.

🔁 Step-by-Step Example

🔹 1. Load Translations in Controller

use Inertia\Inertia;

public function login()
{
    // Load the auth.php language file
    syncLangFiles('auth');

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

🧠 This loads the file resources/lang/en/auth.php based on the current Laravel locale and shares its content with Inertia.

💡 Frontend Usage

✅ Vue Example

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

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

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

✅ React Example

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

export default function Login() {
    const { trans, __ } = reactLang()

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

📤 Output on Page

When the above code is rendered, this will be the output:

Hello!
Welcome, John!

🧠 Notes on trans() vs __()

✅ You can use them interchangeably for basic translations. ✅ Both support placeholder replacement.

🛠 Example with Plain String

Sometimes, you might want to append something without a key:

__('auth.welcome', 'Vue Developer')
// Output: "Welcome, {name}! Vue Developer" (if placeholder is not used)

But recommended usage is always with an object:

trans('auth.welcome', { name: 'Amit' })
// Output: "Welcome, Amit!"

📡 Access Inertia Shared Props

Vue:

import { usePage } from '@inertiajs/vue3'

const { lang } = usePage().props

React:

import { usePage } from '@inertiajs/react'

const { lang } = usePage().props

You can directly access the full language object shared by Inertia.

🗂️ Translation File Location

Language files are loaded based on the current Laravel locale. By default, Laravel uses resources/lang/{locale} structure:

resources/lang/
├── en/
│   └── auth.php
├── hi/
│   └── auth.php

When calling:

syncLangFiles('auth');

It dynamically loads resources/lang/{locale}/auth.php.

⚙️ Configuration

You can customize the language directory by modifying config/inertia-lang.php:

return [

    /*
       |--------------------------------------------------------------------------
       | Language Files Base Path
       |--------------------------------------------------------------------------
       |
       | Specifies the base directory where language files are stored.
       | By default, it points to the "lang" folder in the project root
       | using Laravel's base_path() helper.
       |
       */

    'lang_path' => base_path('lang'),
    
    /*
    |--------------------------------------------------------------------------
    | Output Path (Exported Files)
    |--------------------------------------------------------------------------
    |
    | Where the package will write generated files
    | like JSON for frontend tooling.
    |
    */

    'output_lang' => resource_path('js/lang'),
];

🆕 JSON File Support — Command

This Artisan command scans all locale folders in your lang_path and converts every .php translation file into a .json file — ready for direct frontend consumption without needing Inertia shared props.

Run the Command

php artisan erag:generate-lang

Example

Input: resources/lang/en/auth.php

return [
    'welcome'  => 'Welcome, {name}!',
    'greeting' => 'Hello!',
];

Output: resources/js/lang/en/auth.json

{
    "welcome": "Welcome, {name}!",
    "greeting": "Hello!"
}

Generated Output Structure

resources/js/lang/
├── en/
│   ├── auth.json
│   ├── validation.json
│   └── pagination.json
├── hi/
│   ├── auth.json
│   └── validation.json

🧩 Through:

• vueLang() — Vue 3
• reactLang() — React

📄 License

This package is licensed under the MIT License.

🤝 Contributing

Pull requests and issues are welcome! Let’s work together to improve localization in Laravel! 💬