Dynamic Page Updates with Laravel Blade Fragments

Laravel Blade Fragments offer a streamlined approach to partial page updates, perfectly suited for frameworks like htmx or Turbo. This server-side solution enhances interactivity without sacrificing Laravel's ease of use.

Utilizing Blade Fragments

Here's a basic example of defining and using a fragment:

<!-- Blade template -->
@fragment('notification-list')
    <div class="notifications">
        @foreach($notifications as $notification)
            <div class="alert">
                {{ $notification->message }}
            </div>
        @endforeach
    </div>
@endfragment

<!-- Controller -->
return view('dashboard')->fragment('notification-list');

Real-World Application: Live Notification System

Let's illustrate with a live notification system:

<?php

namespace App\Http\Controllers;

use App\Models\Notification;
use Illuminate\Http\Request;

class NotificationController extends Controller
{
    public function store(Request $request)
    {
        $notification = Notification::create([
            'user_id' => auth()->id(),
            'message' => $request->message,
            'type' => $request->type
        ]);

        if ($request->hasHeader('HX-Request')) {
            return view('notifications.index', [
                'notifications' => auth()->user()->notifications()->latest()->get()
            ])->fragmentIf(
                $request->hasHeader('HX-Request'),
                'notification-list'
            );
        }

        return back();
    }

    public function clear(Request $request)
    {
        auth()->user()->notifications()->delete();

        return view('notifications.index', [
            'notifications' => collect()
        ])->fragment('notification-list');
    }
}

Corresponding template structure:

<div class="container">
    @fragment('notification-list')
        <div class="notification-wrapper">
            @forelse($notifications as $notification)
                <div class="alert alert-{{ $notification->type }}">
                    {{ $notification->message }}
                    {{ $notification->created_at->diffForHumans() }}
                </div>
            @empty
                <p>No notifications</p>
            @endforelse
        </div>
    @endfragment
</div>

This demonstrates how Blade Fragments provide a clean, efficient method for updating parts of a page, aligning perfectly with modern web development best practices. The integration with progressive enhancement techniques makes it a powerful tool in the Laravel ecosystem.

The above is the detailed content of Dynamic Page Updates with Laravel Blade Fragments. For more information, please follow other related articles on the PHP Chinese website!