Integrating Filament 4 with Vite
this article maybe incomplete because this information is compiled from my memory debugging my project. But the core information is here. I will add more when i stumbled accross this problem again on next project
Filament 4 uses Laravel’s modern frontend tooling, and you can integrate it with Vite for faster builds and live reloading. Follow these steps to enable full Vite support with Filament’s Blade views.
Contents
1. Publish Filament View Resources
You need to copy Filament’s core Blade templates into your project so you can edit them.
php artisan vendor:publish --tag=filament-views
php artisan vendor:publish --tag=filament-panels-viewsThis will create editable copies in:
resources/views/vendor/filament/
resources/views/vendor/filament-panels/2. Locate Base Layout File
Search for the Filament layout file where your app’s head and scripts are defined.
Usually it’s:
resources/views/vendor/filament-panels/components/layouts/app.blade.phpor
resources/views/vendor/filament/components/layouts/base.blade.php3. Insert Vite Assets
Add Vite’s compiled CSS and JS into the layout.
Inside <head>:
@vite('resources/css/app.css')Before </body>:
@vite('resources/js/app.js')4. Verify Build Configuration
Ensure your vite.config.js includes Laravel plugin support:
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
})5. Run Dev Server
Start Vite for live reload during development:
npm run devOr build for production:
npm run buildSummary
After integration:
- Filament’s interface will use your Vite-compiled assets.
- You can freely customize Filament’s styles, scripts, and components.
- Live reload and faster builds from Vite now apply to Filament admin UI.