Auto-reloading Filament (v3) panels using Vite

When integrating a Filament panel into your Laravel project, you might find that Vite’s auto-reloading feature isn’t functioning as expected. This issue arises because the panel isn’t loading Vite-managed resources.

While a long-term solution might involve crafting your own Filament theme that incorporates Vite, there’s a straightforward workaround available. By tweaking the AdminPanelProvider class to inject a Vite resource, you can ensure Vite’s auto-reloading works smoothly:

class AdminPanelProvider extends PanelProvider
{
    public function register(): void
    {
        parent::register();

        FilamentView::registerRenderHook(
            'panels::body.end',
            fn (): string => Blade::render("@vite('resources/js/app.js')"),
        );
    }

    public function panel(Panel $panel): Panel
    {
		  // ... stuff
	}
}

This modification results in the Filament panel loading the standard app.js. Even though it’s not essential within the panel, given that it’s a cached asset, its presence has minimal impact on performance.

0 comments