Filament / Livewire / Flux - Component Render Issues

I have been working with custom livewire pages inside filament. Everything works fine except for Livewire/flux components.

I have configured the following,

AppServiceProvider.php, inside boot

use Illuminate\Support\Facades\Blade;

if (request()->is('admin/flux*')) {
    FilamentView::registerRenderHook(
        PanelsRenderHook::BODY_END,
        fn (): string => Blade::render('@fluxScripts'),
    );

    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => Blade::render('@fluxAppearance'),
    );
}

app.css

@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

This allows Flux works in filament (i also have the pro components), but the render dont work properly. Styles and Scripts. The free ones are the only ones that render properly, but even so with some defects.

Any idea?

lift_spindle

2 months ago

Level 16

I tried going down this road using Livewire Starter Kit + Filament v5. I could see that the directives were being applied (or at least it looked like they were) but I was able to actually render flux components- I was only getting text, no styling. I removed that snippet from the app service provider.

Instead I published a Filament custom theme. Then copy pasted the imports and source from app.css to the (filament) theme.css. I added the necessary "../../" to make them line up. I was then able to render flux ui.

I wasn't getting any errors in the console about missing files... but something wasn't perfect. Things like badges and buttons were coming in full width. i had to add 'w-fit' in the class attribute to make them look right. But things like <flux:heading level="2" size="xl">Heading</flux:heading> was working correctly.

SolidBridge

2 months ago

Level 1

I have moved on to another project, but will get back to it to test your propose to see if it fix mine aswell. Thank you for sharing.

Please or to participate in this conversation.