frontend configuration + middleware to set app locale

Author: emmpaul

app/Http/Controllers/Settings/LanguageController.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Http\Controllers\Settings;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
+
+class LanguageController extends Controller
+{
+    /**
+     * Update the user's language preference.
+     */
+    public function update(Request $request): RedirectResponse
+    {
+        $validated = $request->validate([
+            'locale' => ['required', 'string', Rule::in(['en', 'fr'])],
+        ]);
+
+        $request->user()->update([
+            'locale' => $validated['locale'],
+        ]);
+
+        return back()->with('status', 'Language updated successfully');
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Foundation\Inspiring;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
 use Inertia\Middleware;
 use Tighten\Ziggy\Ziggy;
 
@@ -51,6 +52,11 @@ public function share(Request $request): array
                 'location' => $request->url(),
             ],
             'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
+            'locale' => [
+                'current' => App::getLocale(),
+                'available' => config('app.available_locales'),
+                'user_preference' => $request->user()?->locale,
+            ],
         ];
     }
 }

app/Http/Middleware/SetUserLocale.php

@@ -0,0 +1,82 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class SetUserLocale
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        // Priority 1: User's saved locale preference
+        if ($userLocale = $request->user()?->locale) {
+            App::setLocale($userLocale);
+            return $next($request);
+        }
+
+        // Priority 2: Session locale (for guest users who changed language)
+        if ($sessionLocale = $request->session()->get('locale')) {
+            if (in_array($sessionLocale, $this->getSupportedLocales())) {
+                App::setLocale($sessionLocale);
+                return $next($request);
+            }
+        }
+
+        // Priority 3: Browser language preferences
+        $this->setLocaleFromBrowser($request);
+
+        return $next($request);
+    }
+
+    /**
+     * Set locale based on browser language preferences
+     */
+    private function setLocaleFromBrowser(Request $request): void
+    {
+        $browserLocales = $request->getLanguages();
+        $supportedLocales = $this->getSupportedLocales();
+
+        foreach ($browserLocales as $browserLocale) {
+            // Try exact match first (e.g., en-US)
+            $normalizedLocale = str_replace('_', '-', strtolower($browserLocale));
+            if (in_array($normalizedLocale, $supportedLocales)) {
+                App::setLocale($normalizedLocale);
+                return;
+            }
+
+            // Try language code only (e.g., en from en-US)
+            $languageCode = strtolower(substr($browserLocale, 0, 2));
+            if (in_array($languageCode, $supportedLocales)) {
+                App::setLocale($languageCode);
+                return;
+            }
+
+            // Try to find a supported locale that starts with the language code
+            foreach ($supportedLocales as $supportedLocale) {
+                if (str_starts_with($supportedLocale, $languageCode . '-')) {
+                    App::setLocale($supportedLocale);
+                    return;
+                }
+            }
+        }
+
+        // Fallback to default locale if no match found
+        App::setLocale(config('app.locale'));
+    }
+
+    /**
+     * Get supported locales from config
+     */
+    private function getSupportedLocales(): array
+    {
+        return config('app.available_locales');
+    }
+}

app/Models/User.php

@@ -20,6 +20,7 @@ class User extends Authenticatable
     protected $fillable = [
         'name',
         'email',
+        'locale',
         'password',
     ];
 

bootstrap/app.php

@@ -2,6 +2,7 @@
 
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\SetUserLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -18,6 +19,7 @@
 
         $middleware->web(append: [
             HandleAppearance::class,
+            SetUserLocale::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
         ]);

config/app.php

@@ -123,4 +123,20 @@
         'store' => env('APP_MAINTENANCE_STORE', 'database'),
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Available Locales
+    |--------------------------------------------------------------------------
+    |
+    | This array defines the list of supported locales for your application.
+    | These will be used to validate user preferences, detect browser languages,
+    | and limit localization to only approved languages.
+    |
+    */
+
+    'available_locales' => [
+        'en',
+        'fr'
+    ],
+
 ];

database/migrations/0001_01_01_000000_create_users_table.php

@@ -15,6 +15,7 @@ public function up(): void
             $table->id();
             $table->string('name');
             $table->string('email')->unique();
+            $table->string('locale', 5)->default('en');
             $table->timestamp('email_verified_at')->nullable();
             $table->string('password');
             $table->rememberToken();

package-lock.json

@@ -39,6 +39,7 @@
         "typescript": "^5.2.2",
         "vite": "^7.0.4",
         "vue": "^3.5.13",
+        "vue-i18n": "^12.0.0-alpha.3",
         "ziggy-js": "^2.4.2"
     },
     "optionalDependencies": {

package.json

@@ -6,17 +6,25 @@ import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import { ZiggyVue } from 'ziggy-js';
 import { initializeTheme } from './composables/useAppearance';
+import i18n from './i18n';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
 createInertiaApp({
     title: (title) => (title ? `${title} - ${appName}` : appName),
     resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
     setup({ el, App, props, plugin }) {
-        createApp({ render: () => h(App, props) })
-            .use(plugin)
-            .use(ZiggyVue)
-            .mount(el);
+        const app = createApp({ render: () => h(App, props) });
+
+        // Handle the new locale structure where locale is an object with 'current' property
+        const localeData = (props.initialPage.props as any)?.locale;
+        const currentLocale = typeof localeData === 'object' && localeData?.current 
+            ? localeData.current 
+            : (typeof localeData === 'string' ? localeData : 'en');
+        
+        i18n.global.locale.value = currentLocale;
+
+        app.use(plugin).use(ZiggyVue).use(i18n).mount(el);
     },
     progress: {
         color: '#4B5563',