F
Filament15mo ago
SirFat

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
Patrick Boivin15mo ago
Sorry, I don't understand what your issue is... what other assets are not being loaded?
SirFat
SirFatOP15mo 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
Patrick Boivin15mo 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
SirFatOP15mo 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
Patrick Boivin15mo ago
I'm afraid I can't really help you if I can't see your code
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
Yes, x-filament-panels::page is correct for v3
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
Did you modify anything in CounterPage.php or Counter.php ?
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
This all looks correct... very weird. Can you try creating a new page and new livewire component?
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
Can you share the output of php artisan about ?
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
yes
Patrick Boivin
Patrick Boivin15mo 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
SirFatOP15mo 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
Patrick Boivin15mo ago
composer require filament/filament:"^3.0"
SirFat
SirFatOP15mo 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
Patrick Boivin15mo ago
Nice! Glad you got it working 🙌
Want results from more Discord servers?
Add your server