lazy load on full page hides named slot

Hi everyone I'm working on a full page component project, It's loading lazy.

In my app.blade.php file I have a slot named

    @if (isset($header))
        <header class="pt-4">
            <div>
                {{ $header }}
            </div>
        </header>
    @endif

    <!-- Page Content -->
    <main >
        {{ $slot }}
    </main>

my route

    Route::get('product', ShowProduct::class)->name('product.index')->lazy();

in my livewire component

	public $pageTitle
    public $componentName;								
    public function mount()
{
    $this->pageTitle = 'Product listing';
    $this->componentName = auth()->user()->name;
}

in the component view

<x-slot name="header">
        <h4><strong class="pb-1 text-info">{{ $componentName }}</strong> | {{ $pageTitle }}</h4>
    </x-slot>

I have the problem in the component view that is not showing when I use Lazy, but if I remove it, it will work for me. I hope you can help me. I am using Livewire 3

danJames

1 year ago

Level 3

Anyone have a solution to this?

HasanAftab

1 year ago

Level 1

📌 Creating a Base Livewire Component for Dynamic Page Titles

In this guide, we'll create a Base Livewire Component that allows you to dynamically update the page title from any Livewire component.

1️⃣ Create a Base Component

To centralize the logic for setting page titles, create a BaseComponent that extends Livewire's Component.
This will ensure all Livewire components have access to the lazyLoadTitle method.

<?php
namespace App\Livewire;
use Livewire\Attributes\Js;
use Livewire\Component;

class BaseComponent extends Component
{
    #[Js]
    public function lazyLoadTitle($title = "Head of Security")
    {
        $this->js("document.title = '{$title} | HOS';");
    }
}

📌 Dashboard Livewire Component

The Dashboard component extends BaseComponent to dynamically update the page title when the component is loaded.

🛠 Code Implementation

<?php
namespace App\Livewire;

class Dashboard extends BaseComponent
{
    public function mount()
    {
        $this->lazyLoadTitle('Dashboard');
    }
    
    public function render()
    {
        return view('livewire.dashboard');
    }
}

1 like

Please or to participate in this conversation.