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
Sorry, I don't understand what your issue is... what other assets are not being loaded?
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
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.
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
I'm afraid I can't really help you if I can't see your code
Sure thing! This is the blade that shows the component:
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
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
Yes,
x-filament-panels::page
is correct for v3The counter filament-page is the default generated one and the livewire component is exactly the same as within the video also
Did you modify anything in CounterPage.php or Counter.php ?
only added the increment function into Counter.php - here they are:
CounterPage.php
and Counter.php
This all looks correct... very weird.
Can you try creating a new page and new livewire component?
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
Can you share the output of
php artisan about
?for sure, so,
* php artisan make filament-page test
* php artisan make livewire test
and do the same per the instructions in the video?
yes
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
?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
composer require filament/filament:"^3.0"
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!
Nice! Glad you got it working 🙌