Blade Tricks Intermediate Since Laravel 10.x

The @fragment Blade Directive

Define named fragments in your Blade templates and render only that fragment on demand — useful for partial updates and lazy loading.

Overview

The @fragment directive lets you define named sections within a full Blade template. You can then ask Laravel to render only that fragment instead of the entire page. This is a building block for htmx-style partial page updates and lazy loading patterns.

Usage

Define a fragment in your full-page template:

<x-layout>
    <h1>User List</h1>

    @fragment('user-table')
    <table>
        @foreach ($users as $user)
            <tr>
                <td>{{ $user->name }}</td>
                <td>{{ $user->email }}</td>
            </tr>
        @endforeach
    </table>
    {{ $users->links() }}
    @endfragment
</x-layout>

In your controller, render only the fragment:

class UserController
{
    public function index(Request $request)
    {
        $users = User::paginate(20);

        if ($request->hasHeader('HX-Request')) {
            return view('users.index', compact('users'))
                ->fragment('user-table');
        }

        return view('users.index', compact('users'));
    }
}

You can also render multiple fragments at once:

return view('dashboard')
    ->fragments(['stats', 'recent-activity']);

When to Use

  • htmx or Turbo integration — return only the changed portion of a page
  • Lazy-loading sections of a page via AJAX
  • Avoiding duplicate templates for full-page vs partial responses
  • Any pattern where the same template serves both a full page and a partial update