Mastering Laravel Blade Partial API with HTMX

To create a product listing page with Laravel Blade, begin with a controller to fetch products from the database:

class ProductController extends Controller
{
    public function index(Request $request)
    {
        $products = Product::paginate(10);
        return view('product.index', compact('products'));
    }
}

Then, set up a Blade view to display the products:

@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Products</h2>
    <table>
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Category</th>
                <th scope="col">Brand</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            @if (isset($products) && count($products) > 0)
                @foreach ($products as $product)
                    @include('product.partials.table.row',['product' => $product])
                @endforeach
            @endif
        </tbody>
    </table>
</div>
@endsection

Enhancing User Experience with HTMX

For dynamic updates, create a partial view for product rows with a refresh button using HTMX:

// resources/views/product/partials/table/row.blade.php
<tr id="product-{{ $product->id }}">
    <td>{{ $product->name }}</td>
    <td>{{ $product->category }}</td>
    <td>{{ $product->brand }}</td>
    <td>
        <button 
            type="button"
            hx-get="{{ url('product/partials/table/row/'. $product->id) }}" 
            hx-target="#product-{{ $product->id }}"
            hx-swap="outerHTML" 
            class="btn btn-sm btn-primary mb-3">
            Refresh
        </button>    
    </td>
</tr>

Simplifying Route Configuration

Configure routes to handle Blade partial requests efficiently:

use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Response;

Route::match(['get', 'post'], '{path}', function ($path, Request $request) {
    $viewPath = str_replace('/', '.', $path);
    if (!View::exists($viewPath)) {
        abort(404, "Partial [$viewPath] not found.");
    }
    
    // Additional logic for fetching data... 

    return view($viewPath, $data);
})->where('path', '.*');

Refreshing Data with Ease

To refresh the entire product table, add a button that fetches updated rows:

@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Products</h2>
    <button 
        type="button"
        hx-get="{{ url('product/partials/table') }}" 
        hx-target="#product-rows"
        hx-swap="innerHTML" 
        class="btn btn-sm btn-primary mb-3">
        Refresh Table
    </button>       
    <table>
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Category</th>
                <th scope="col">Brand</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody id="product-rows">
            @include('products.partials.table.list',['products' => $products])
        </tbody>
    </table>
</div>
@endsection

Key Guidelines for Using Blade Partial API and HTMX

When using the Blade Partial API pattern with HTMX, remember:

• Directly map each request path to a Blade file.
• Seamlessly handle both GET and POST requests.
• Assign each partial its data context.
• Ensure non-existent views return a 404.
• Render everything server-side, avoiding JSON data handling.

Conclusion

The Laravel Blade Partial API pattern with HTMX simplifies building dynamic interfaces without the complexities of modern JavaScript frameworks. This method enhances both user experience and SEO, streamlining the development process. For more insights and updates, consider subscribing to our blog.

Your Guide to GitHub Universe 2025: Schedule Launched!

Get ready for GitHub Universe 2025! Check out the schedule, create your personalized agenda, and sign up for mentoring sessions. Join us for an exciting experience!

Sep 13, 2025