Seleccionar Idioma (Lenguaje) en Laravel Livewire

▶

Te muestro cómo puedes manejar el idioma en Laravel. Aquí puedes ver que la interfaz ahora cambia a español, y luego a inglés.

Muy sencillo: para esto vamos a utilizar lo que es Livewire. Aunque, si por cualquier masoquista razón no quieres emplear Livewire, seguramente cuentas con los conocimientos necesarios para hacer los cambios por tu cuenta.
Lo importante es conocer las funciones que debemos llamar, más allá de cómo las implementamos; es decir, entender cuáles métodos hay que usar para tal fin.

El componente y el manejo del lenguaje

Este es el componente. Aquí puedes ver que, una vez recibido el lenguaje (que viene de este listado que tenemos acá), en este caso estoy empleando Laravel + Livewire, cada vez que cambiamos el lenguaje mediante wire:model, lo que hacemos es un llamado al método render() que está definido:

<?php

namespace App\Livewire\User;

use Livewire\Attributes\Layout;
use Livewire\Component;

use Illuminate\Support\Facades\App;

#[Layout('layouts.store')]
class UserProfile extends Component
{

    public $language;

    public function render()
    {
        if (!isset($this->language)) {
            // al cargar el componente, este codigo se ejecuta al language NO estar seleccionado 
            // por el usuario
            $this->language = session('locale') ?? App::getLocale();
        } else {
            // se ejecuta desde la vista asociada por el .live
            session(['locale' => $this->language]);
            App::setLocale($this->language);
        }
        
        return view('livewire.user.user-profile');
    }
}

Hay muchas formas de hacerlo, pero esta fue la implementación que se me ocurrió. Lo importante es que te llegue el lenguaje del usuario. Yo te estoy mostrando cómo lo hice yo.

Entonces, aquí lo que hacemos es lo siguiente:

• Si no está definido, inicializo por defecto el lenguaje según el idioma seleccionado en el sistema (ya sea en la sesión, que es donde lo guardo, o usando alguna de las formas para obtener el idioma a nivel de la aplicación).
• Cuando cambiamos el idioma mediante wire:model, entramos aquí y establecemos el idioma en la sesión, ya que lo guardo ahí.
• Y también, importantísimo: hay que establecer el idioma a nivel del framework, porque si no, no estamos haciendo nada.

Aquí también puedes aprovechar para guardar preferencias del usuario si quieres que sea persistente (por ejemplo, guardarlo en base de datos).
Yo, en otro video, te comentaba cómo te recomendaba guardar las preferencias de usuario sin tener que crear 20 columnas por 20 preferencias distintas. Lo que hacía era guardar un pequeño objeto JSON.
Eso ya te lo comenté antes y es precisamente lo que hacemos aquí.

Transición y recarga de interfaz

En el caso de Livewire, para que recargue toda la interfaz, también le metí un pequeño AlpineJS que lo que hace es esperar unos segundos para que dé tiempo de hacer la petición (wire:model) y luego recargar toda la página.
Esto es para que veamos el cambio aplicado a toda la interfaz, y es por eso que se ve reflejado por completo:

<flux:select :label="__('Language')" id="language" wire:model.live="language" x-data @change="setTimeout(function(){window.location.reload()}, 100)" class="mt-1 block w-full rounded border-gray-300">
    <option value="es">Español</option>
    <option value="en">English</option>
</flux:select>

Middleware para mantener el idioma

Es importante que los cambios se mantengan a lo largo de todas las peticiones. Si, por ejemplo, volvemos a "Blog" o navegamos a otra parte de la aplicación, se volvería al idioma inicial.
Para evitar esto, debemos implementar un middleware, el cual se encargue de establecer el idioma guardado en la sesión para cada una de las peticiones.
Porque, nuevamente, esto no es persistente: si recargamos la página sin middleware, se pierde.

Esto es un fastidio. Para resolverlo, implementamos el siguiente middleware. Tal cual puedes ver:

$ php artisan make:middleware SetLocale

Luego, dentro de ese middleware, establecemos el idioma que tenemos en la sesión, si y solo si existe.
También le puedes pasar como segundo parámetro el idioma por defecto (si no quieres usar el condicional), pero en este caso yo lo definí así:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\App;

class SetLocale
{
    public function handle($request, Closure $next)
    {

        if (session('locale')) {
            App::setLocale(session('locale'));
        }
        
        return $next($request);
    }
}

Dónde registrar el middleware
¿Dónde llamamos a este middleware? Puedes configurarlo directamente en las rutas si así lo prefieres:

Route::middleware([SetLocale::class])

Pero me refiero a colocarlo dentro del grupo de rutas web.

bootstrap/app.php

->withMiddleware(function (Middleware $middleware) {
    $middleware->web([
        // Tu middleware personalizado
            \App\Http\Middleware\SetLocale::class,
    ]);
})

Aunque una forma más limpia es usar withMiddleware(), que desde Laravel 11 ahora está disponible.
Con este método puedes definirlo directamente en las rutas de tipo web, y así cada petición ejecuta este middleware automáticamente.

Recuerda que, por definición, los middleware se ejecutan antes de cada petición HTTP del navegador o lo que sea.

Archivos de idioma

Crea tus archivos de lenguaje en y es, en este caso para inglés y español.
Define las parejas clave–valor como un objeto:

resources/lang/es.json

{
    "Light": "Claro",
    "Dark": "Oscuro",
     ***   
}   

resources/lang/en.json

{
    "Light": "Light",
    "Dark": "Dark",
     ***   
}    

Luego, desde las vistas, simplemente referencias el texto mediante __(), que es el nombre del método que toma el nombre del campo.
Por ejemplo:

{{ __('Light') }}

Así que, de esta forma tan sencilla, tenemos configurado el idioma en Laravel. Son simplemente dos pasos clave.