use laravel-vite in filament

[ariaieboy]

as you might know, laravel migrated from laravel-mix to laravel-vite, and from now on it will use vitejs with laravel-vite as the main frontend asset builder.

in laravel-vite, unlike the laravel-mix, we don't have access to the asset's URLs directly. and @Vite directive will inject specified scripts or styles + some vite scripts for hot reloading in the dev environment.

if you want to add custom assets to the filament admin you can use this workaround :

Filament::serving(function () {
            Filament::pushMeta([
                (new Vite)(['resources/css/custom.css'])
           ]);
        });

or you can use render hooks :

    Filament::serving(function () {
            Filament::registerRenderHook(
              'head.end',
                static fn()=>(new Vite)(['resources/css/custom.css'])
            );
        });

if you won't use your custom theme you can use this code :

Filament::serving(function () {
            Filament::registerTheme('');
            Filament::registerRenderHook(
              'head.end',
                static fn()=>(new Vite)(['resources/css/filament.css'])
            );
        });

since we don't have access to the CSS asset we should pass the empty URL to the registerTheme so the filament doesn't load default filament CSS assets.
then we inject the custom-themed CSS file using filament render hook to the end of the head tag so other custom themes from plugins don't overwrite our theme.

[ariaieboy]

if you could use laravel-vite more cleanly please share your experience in this discussion

[adammparker]

Your last suggestion worked for me to get a custom theme working. Thank you!

The grammar thing through me off at first since you said "If you won't use your custom theme", I think you meant "If you want to use your custom theme".

Hoping for an official solution eventually so we don't have to rely on a hook, but great idea. 💯

[ariaieboy]

ok in the latest version of filament we have official vite support for theming :
https://github.com/filamentphp/filament/releases/tag/v2.14.0

for more details just check the documentation:
https://filamentphp.com/docs/2.x/admin/appearance#building-themes