README

Overview

InertiaTrans is a Laravel package that synchronizes your Laravel translation files with any JavaScript front-end framework. Continue to maintain your translations in lang/** as usual, and InertiaTrans will convert them into a JavaScript-friendly format on each page load.

Requirements

Laravel ^12
Node.js ^20

🚀 Installation

Install via Composer:

composer require iammarjamal/inertiatrans

Publish and install the NPM dependencies:
```
php artisan inertiaTrans:install
```

📚 Usage

1. Add the Blade directive

In your main Blade layout (e.g. resources/views/app.blade.php), include the @inertiaTrans directive inside <head>:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    @viteReactRefresh
    @vite([
        'resources/js/app.jsx',
        "resources/js/pages/{$page['component']}.jsx"
    ])
    @inertiaHead

    {{-- Include translations as a JS object --}}
    @inertiaTrans
</head>
<body class="bg-white dark:bg-black text-gray-800 flex items-center justify-center min-h-screen p-6 lg:p-8">
    @inertia
</body>
</html>

2. Use translations in your front-end

React Example

import { __, trans } from 'inertia-translations';

export default function Welcome() {
  return (
    <div>
      <h1 className="text-3xl font-bold">
        { trans("app.HelloWorld") }
      </h1>
      <h1 className="text-3xl font-bold">
        { __("app.HelloWorld") }
      </h1>
    </div>
  );
}

Vue Example

<script setup>
import { __, trans } from 'inertia-translations';
</script>

<template>
  <div>
    <h1>{{ trans("app.HelloWorld") }}</h1>
    <h1>{{ __("app.HelloWorld") }}</h1>
  </div>
</template>

🔍 How It Works

Laravel translations
- You keep your translation files in lang/** as usual.
- The @inertiaTrans directive gathers them and injects a single JavaScript object into your page.
Caching in Production
- In APP_ENV=production, translations are cached for performance.
- After updating any translation file, run:
```
php artisan optimize:clear
```
  to clear the cache and load the latest strings.

✨ Credits

Creator: iammarjamal

📄 License

This package is released under the MIT License. See the LICENSE file for details.

iammarjamal / inertiatrans

Maintainers

Details