Filament•11mo ago

Filament-page + LiveWire Component

I'm trying to build a livewire component so I use that within a Filament page and I can only presume it's now by default loading in 'full-page' mode as it is only loading the component with no other assets. Is this something to do with the filament page or something to with livewire? I've followed a guide to perform this on filament 2 and livewire 2 and it works as the same symptom occurs on their example. Any idea where else to start or any guides on this I should be reading that I was unable to track down?

21 Replies

Patrick Boivin•11mo ago

Sorry, I don't understand what your issue is... what other assets are not being loaded?

SirFat•11mo ago

Hi Patrick, the underlying navigation and header - it's just showing the component itself (unless my understanding of 'full-page' is actually backwards? This is the tutorial I ended up trying to compare against the approach I was taking - https://www.youtube.com/watch?v=M0bzpKqUEUA

Patrick Boivin•11mo ago

Looks fine. Your custom page is itself a Livewire component. That will render the header and sidebar. Inside of this page, you'll have your custom Livewire component that can render just a single part of your UI.

SirFat•11mo ago

When I followed the 'counter' example in the video, I had the same effect though, the navigation and header disappeared. As a test I removed the livewire component reference from the counter-page.blade.php and the navigation/header was presented

Patrick Boivin•11mo ago

I'm afraid I can't really help you if I can't see your code

SirFat•11mo ago

Sure thing! This is the blade that shows the component:

<x-filament-panels::page>
    <livewire:counter />
</x-filament-panels::page>

<x-filament-panels::page>
    <livewire:counter />
</x-filament-panels::page>

if I remove the live wire part, the navigation comes back with the header (counter-page.blade.php) This is all that is in the counter.blade.php

<div style="text-align: center">
    <button wire:click="increment">+</button>
    {{-- The best athlete wants his opponent at his best. --}}
    <h1>{{ $count }} </h1>
</div>

<div style="text-align: center">
    <button wire:click="increment">+</button>
    {{-- The best athlete wants his opponent at his best. --}}
    <h1>{{ $count }} </h1>
</div>

I did notice that the counter-page default nodes were this <x-filament-panels::page which differed from the example in the video, but I presumed that was a new approach from v3

Patrick Boivin•11mo ago

Yes, x-filament-panels::page is correct for v3

SirFat•11mo ago

The counter filament-page is the default generated one and the livewire component is exactly the same as within the video also

Patrick Boivin•11mo ago

Did you modify anything in CounterPage.php or Counter.php ?

SirFat•11mo ago

only added the increment function into Counter.php - here they are: CounterPage.php

use Filament\Pages\Page;

class CounterPage extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.counter-page';
}

use Filament\Pages\Page;

class CounterPage extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.counter-page';
}

and Counter.php

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment() {
        $this->count++;
    }
    public function render()
    {
        return view('livewire.counter');
    }
}

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment() {
        $this->count++;
    }
    public function render()
    {
        return view('livewire.counter');
    }
}

Patrick Boivin•11mo ago

This all looks correct... very weird. Can you try creating a new page and new livewire component?

SirFat•11mo ago

I ran the clear cache command per the 'rules' on here, and reran npm run build (and I had npm run dev running too) in case it was something lying around

Patrick Boivin•11mo ago

Can you share the output of php artisan about ?

SirFat•11mo ago

for sure, so, * php artisan make filament-page test * php artisan make livewire test and do the same per the instructions in the video?

Patrick Boivin•11mo ago

yes

SirFat•11mo ago

artisanoutput.txt

Patrick Boivin•11mo ago

Actually, no. In the Livewire component view, just try this <div>Hello</div> See if you can get the text to display correctly Can you upgrade to the latest Filament v3.0.39 ?

SirFat•11mo ago

yep hello appears - and sure thing - one sec just updating now - is there anything special I should run to clear any caches or things like that? hm it wasn't in the composer update list of libraries, i'll attempt to force it

Patrick Boivin•11mo ago

composer require filament/filament:"^3.0"

SirFat•11mo ago

coolio - one tick looks like I have a conflict somewhere: " Root composer.json requires filament/actions 3.0.29, found filament/actions[v3.0.29] but these were not loaded, likely because it conflicts with another require." (I added actions to the require as filament/filament had a version complaint. I used ^3.0.29 too as 3.0.0 is what is installed got it, nevermind, updating version now Yep - I think you nailed it - I'm guessing one of the guides I was using to install everything in the first place hard-set the version to 3.0.0 in composer.json - that's much better! Wizard screen (the component) now shows up - now to get my head around custom wizard steps 😉 Thanks for persisting with me!

Patrick Boivin•11mo ago

Nice! Glad you got it working 🙌

Gaming

Programming

Filament-page + LiveWire Component