erag / laravel-lang-sync-inertia
A Laravel package for syncing and managing language translations with Inertia.js integration, allowing easy management of multi-language support in Laravel applications.
Fund package maintenance!
eramitgupta
www.paypal.com/paypalme/teamdevgeek
Requires
- php: >=8.1.0
- illuminate/filesystem: ^8.12|^9.0|^10.0|^11.0|^12.0
- illuminate/support: ^8.0|^9.0|^10.0|^11.0|^12.0
- inertiajs/inertia-laravel: ^1.3|^2.0
- laravel/pint: ^1.13
README
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
π¦ 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
This will publish:
- β
config/inertia-lang.php
β for customizing the language path - β
resources/js/composables/useLang.ts
β for Vue (if selected) - β
resources/js/hooks/useLang.tsx
β for React (if selected)
During installation, you'll be prompted to choose either Vue or React for your frontend framework.
π 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 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 { useLang } from '@/composables/useLang' const { trans, __ } = useLang() </script>
β React Example
import React from 'react' import { useLang } from '@/hooks/useLang' export default function Login() { const { trans, __ } = useLang() 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 __()
Function | Use Case | Description |
---|---|---|
trans() |
Advanced | Use when you need to pass dynamic placeholders like {name} |
__() |
Simple | Shortcut for quick access to translated strings |
β 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 [ 'lang_path' => lang_path(), // Default: /resources/lang ];
π§© Composables Location
- Vue:
resources/js/composables/useLang.ts
- React:
resources/js/hooks/useLang.tsx
You can modify the location or structure of these files by adjusting the published files.
π 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! π¬