codecng/laravel-inertia-translations

Provides translations for an Inertia Based Project

v1.1.0 2025-02-26 09:53 UTC

This package is auto-updated.

Last update: 2025-05-12 02:05:41 UTC


README

Latest Version on Packagist Total Downloads

A zero-configuration Laravel package that automatically exports your Laravel translations for use with Inertia.js. Supports both React and Vue, with full TypeScript support!

Installation

composer require codecng/laravel-inertia-translations

That's it! No additional configuration needed.

Usage

Whenever you add or modify translations in your Laravel application, simply run:

php artisan translate

This command will:

  1. Check if language files exist (if not, it will publish them automatically)
  2. Process all your translation files (both JSON and PHP)
  3. Generate JSON translation files in resources/js/lang/
  4. Create appropriate utility files based on your stack (React/Vue + TypeScript)

What Gets Processed

  • ✅ JSON files in lang/ directory
  • ✅ PHP files in language subdirectories
  • ✅ Automatically merges all translations by locale

Generated Files Structure

resources/js/
├── lang/
│   ├── en.json
│   ├── es.json
│   └── fr.json
└── lib/
    └── translations.(js|ts|jsx|tsx)  # Based on your stack

Framework Support

React

import { __ } from '@/lib/translations'

function Welcome() {
    return (
        <div>
            <h1>{__('welcome.title')}</h1>
            <p>{__('welcome.message')}</p>
            <p>{__('Users')}</p>
        </div>
    )
}

Vue

<script setup>
import { __ } from '@/lib/translations'
</script>

<template>
    <div>
        <h1>{{ __('welcome.title') }}</h1>
        <p>{{ __('welcome.message') }}</p>
    </div>
</template>

Inertia Setup

Make sure to include the current language in your Inertia shared props (in your HandleInertiaRequests middleware):

public function share(Request $request): array
{
    return array_merge(parent::share($request), [
        'language' => request()->user()->language ?? app()->getLocale(),
    ]);
}

Type Support

When using TypeScript, you get full type support for your translation keys:

// The __ function is fully typed
__('welcome.title') // ✓ Valid
__('invalid.key')   // ✗ TypeScript error

Benefits

  • 🚀 Zero configuration required
  • 🔄 Simple one-command updates
  • 🛠 Works with both JSON and PHP translation files
  • 💪 Full TypeScript support
  • ⚡️ Supports both React and Vue
  • 🔍 Automatic type generation for translation keys

Credits

License

The MIT License (MIT). Please see License File for more information.