Filament V4 Custom footer

I just migrated a filament v3 project to filament v4. The migration process was very smooth and completed without any hiccups. The only thing that is broken is the custom footer I had implemented. I have attached the footer here. Below is my Panel Service Provider.

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

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

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

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

vite.config.js

vite.config.js

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

footer.blade.php1.32KB

Solution

Don’t import tailwind.css it’s already being imported by the filament theme. Just make sure the view for your custom footer is in a

@source

@source

directive in the css file and rebuild the assets.

Jump to solution

Filament V4 Custom footer

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

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

public function register(): void
{
    parent::register();

    FilamentView::registerRenderHook(
        PanelsRenderHook::FOOTER,
        fn (): string => Blade::render('footer')
    );

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

vite.config.js

vite.config.js

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

plugins: [
        tailwindcss(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/css/filament/app/theme.css'
            ],
            refresh: [
                ... refreshPaths,
                'app/Livewire/**',
                'app/Filament/**',
            ],
        }),
    ],

footer.blade.php1.32KB

Solution

Don’t import tailwind.css it’s already being imported by the filament theme. Just make sure the view for your custom footer is in a

@source

@source

directive in the css file and rebuild the assets.

Jump to solution

Filament V4 Custom footer

Filament V4 Custom footer

Similar Threads

Similar Threads

Similar Threads