Localization | Create Multi Language in Laravel 11

Share this post on:

What is Laravel Localization?

Laravel Localization is a built-in feature that empowers developers to create multilingual applications effortlessly. It allows you to translate your application’s content into various languages, making your website more accessible to a global audience. By utilizing language files, you can manage translations efficiently and switch between languages dynamically. This feature is especially valuable for enhancing user experience by providing content tailored to the user’s preferred language.

In this guide, we’ll walk you through setting up Laravel Localization with a practical example. We’ll use Laravel Breeze for authentication and implement localization for three languages: English (“en”), Italian (“it”), and French (“fr”). We’ll also include a language selection dropdown in the navigation bar, allowing users to switch languages seamlessly. Once a language is selected, all labels and messages on the page will update accordingly. Let’s dive into the step-by- step process.

Steps to Implement Multi-Language Support in Laravel 11

Step 1: Install Laravel 11

Start by installing Laravel 11. Run the following command to create a new project:

composer create-project laravel/laravel laravel-multi-language

Step 2: Install Laravel Breeze

Now, in this step, we will create an auth scaffold command to generate login, register, and dashboard functionalities using breeze. So, run the following commands:

Laravel 11 Breeze Package:

composer require laravel/breeze --dev

Generate Auth:

php artisan breeze:install 
npm install
npm run build

Step 3: Define Language Messages

In this step, we will define all three languages messages. so, first we need to run following command to use localization:

php artisan lang:publish

now, let’s define messages for English(en), Italian(it) and French(fr) for language:

Lang/en/messages.php

<?php return [

"users" => "Users", "users_list" => "Users Listing", "dashboard" => "Dashboard",

"dashboard_message" => "You're logged in!"

];

Lang/fr/messages.php

<?php return [

"users" => "Utilisatrices",

"users_list" => "Liste des utilisateurs", "dashboard" => "Tableau de bord",

"dashboard_message" => "Vous êtes connecté!" ];

Lang/it/messages.php

<?php return [
"users" => "Utenti",
"users_list" => "Elenco degli utenti",
"dashboard" => "Pannello di controllo", "dashboard_message" => "Hai effettuato l'accesso!"
];

Step 4: Create SetLocale Middleware

php artisan make:middleware SetLocale

App/Http/Middleware/SetLocale.php

<?php
namespace App\Http\Middleware; use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response; use Illuminate\Support\Facades\App;

class SetLocale
{
public function handle(Request $request, Closure $next): Response
{
if($request->session()->has('locale')){ App::setLocale($request->session()->get('locale', 'en'));
}
return $next($request);
}

Next, we need to register the SetLocale middleware to the app.php file.

Bootstrap/app.php

<?php

use Illuminate\Foundation\Application;

use Illuminate\Foundation\Configuration\Exceptions; use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(  DIR  ))

->withRouting(

web:  DIR .'/../routes/web.php', commands:  DIR .'/../routes/console.php', health: '/up',

)

->withMiddleware(function (Middleware $middleware) {

$middleware->web(append: [ SetLocale::class

]);

})

->withExceptions(function (Exceptions $exceptions) {

})->create();

Step 5: Create Routes

Here, We will add the following routes group where you can create new routes for users and change language. let’s update the code:

Routes/web.php

<?php

use App\Http\Controllers\ProfileController;

use App\Http\Controllers\UserController;

use App\Http\Controllers\LanguageController;

use Illuminate\Support\Facades\Route;



Route::get('/', function () {

return view('welcome');

});

Step 6: Create Controller

app/Http/Controllers/LanguageController.php

<?php

namespace App\Http\Controllers; use Illuminate\Http\Request;
use Illuminate\Support\Facades\Session;



class LanguageController extends Controller

{

public function change(Request $request)

{

$lang = $request->lang;

if (!in_array($lang, ['en', 'it', 'fr'])) { abort(400);
} Session::put('locale', $lang); return redirect()->back();
}

}

App/Http/Controllers/UserController.php

<?php
namespace App\Http\Controllers; use Illuminate\Http\Request;
class UserController extends Controller

{

public function index()

{

return view("users");

}

}

Step 7: Create & Update Blade Files

<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ms-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration- 150">
@php($languages = ['en' => 'English', 'fr' => 'French', 'it' => 'Italian'])
<div>Language: {{ $languages[Session::get('locale', 'en')] }}</div>


<div class="ms-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-
3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</button>
</x-slot>


<x-slot name="content">
<x-dropdown-link :href="route('change.lang', ['lang' => 'en'])"> English
</x-dropdown-link>
<x-dropdown-link :href="route('change.lang', ['lang' => 'fr'])"> French
</x-dropdown-link>
<x-dropdown-link :href="route('change.lang', ['lang' => 'it'])"> Italian
</x-dropdown-link>
</x-slot>
</x-dropdown>


</div>

Resources/views/dashboard.blade.php

<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{   ('messages.dashboard') }}
</h2>
</x-slot>


<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
{{   ("messages.dashboard_message") }}
</div>
</div>
</div>
</div>
</x-app-layout>

Resources/views/users.blade.php

<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{   ('messages.users') }}
</h2>
</x-slot>


<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
{{   ('messages.users_list') }}
</div>
</div>
</div>
</div>
</x-app-layout>

Step 8: Create Seeder for User

php artisan make:seeder UserSeeder

All the required steps have been done, now you have to type the given command below and hit enter to run the Laravel app:

php artisan serve

Now, go to your web browser, type the given URL, and view the app output:

http://localhost:8000/
Boost your global reach with 200OK Solutions! Specializing in Laravel localization, we help businesses create multi-language applications that deliver seamless user experiences across regions. Whether you need expert guidance on implementing Laravel 11 features or custom-tailored solutions, our team ensures precision and innovation every step of the way. Empower your business with robust, scalable, and user-centric software solutions. Visit 200OK Solutions today and let’s bring your vision to life!