Livewire Pagination and Canonical prev / next

Level 58

To handle canonical URLs for pagination with Livewire, you can use the paginator object that Livewire provides to generate the URLs for the current, previous, and next pages. You'll need to update the <head> section dynamically as the Livewire component updates.

Here's a step-by-step solution:

In your Livewire component, make sure you have the pagination links set up using Livewire's built-in pagination methods.
Create a method in your Livewire component that returns the current page URL, and the previous and next page URLs based on the paginator's state.
Use Livewire's @push directive to push the canonical links into the stack for the <head> section whenever the component updates.

Here's an example of how you might implement this:

// In your Livewire component

use Livewire\WithPagination;

class YourComponent extends Component
{
    use WithPagination;

    // ...

    public function render()
    {
        $items = Model::paginate(10); // Replace with your actual query

        return view('livewire.your-component', [
            'items' => $items,
        ]);
    }

    public function paginationView()
    {
        return 'vendor.pagination.bootstrap-4'; // Replace with your pagination view if needed
    }

    public function getPaginationLinksProperty()
    {
        $paginator = $this->items;

        $links = [
            'current' => $paginator->url($paginator->currentPage()),
            'prev' => $paginator->previousPageUrl(),
            'next' => $paginator->nextPageUrl(),
        ];

        return $links;
    }
}

{{-- In your Livewire component view (livewire/your-component.blade.php) --}}

@foreach ($items as $item)
    {{-- Display your items --}}
@endforeach

{{ $items->links() }}

@push('head')
    <link rel="canonical" href="{{ $this->paginationLinks['current'] }}" />
    @if ($this->paginationLinks['prev'])
        <link rel="prev" href="{{ $this->paginationLinks['prev'] }}" />
    @endif
    @if ($this->paginationLinks['next'])
        <link rel="next" href="{{ $this->paginationLinks['next'] }}" />
    @endif
@endpush

{{-- In your main layout file (e.g., resources/views/layouts/app.blade.php) --}}

<head>
    {{-- Other head elements --}}

    @stack('head')
</head>

With this setup, every time the Livewire component updates, it will push the correct canonical URLs into the <head> section of your page. Make sure that your main layout file is using the @stack('head') directive to render these dynamic links.