Filament 4 is officially released and stable! Is it time to upgrade your projects? This article will show you the recommended process, but you will also see that it may not be that straightforward.
The good news: there's a Filament 4 upgrade script.
The not-so-good news: it upgrades only some things, and there's still some manual work.
Here's the main thing you need to understand:
Upgrading Filament doesn't mean upgrading ONLY Filament.
You will/may also need to upgrade:
Another word of caution came from Dan Harrin himself with this post on the official Discord:
But, with all those "warnings", if you do want to upgrade as soon as possible, I'm here to help.
Let me break down the upgrade process step-by-step.
I've divided the process into 10 steps.
Preparation:
Upgrade Process:
Extra Work (optional):
Looks complicated, huh? But let's get into it, step-by-step.
Before doing anything, check the Filament v4 requirements for minimum versions of Laravel and PHP:
If your project/server doesn't meet those requirements now, can you upgrade those?
Also, Tailwind v4.0+ is required, but this may be optional if you do not use a custom theme. We'll discuss Tailwind separately at the end of this tutorial: it's probably the trickiest part of the upgrade process.
All the upgrade guides are boring, I know. It's one of those things like "Terms and conditions": you may be tempted to just quickly skim through the Upgrade Guide page and move on with the upgrade script, hoping it will do the job for you.
Wrong.
You need to understand the changes before you start making them. Or, at least, you need to realize the scope of how many things may be touched when performing the upgrade.
So, please, PLEASE read the Upgrade Guide in full at least once.
Some things may not look clear right away, but you may find some things that may stop your decision to upgrade, for now.
Ideally, your application should have some automated tests with Pest/PHPUnit. Upgrade scripts and manual changes will move a lot of code, making it difficult to test everything manually.
If you don't have tests, writing at least some tests while on Filament v3 may make sense. You may also ask AI to generate at least basic smoke tests before upgrading.
Finally, commit all the current changes to the Git repository so you can clearly see what has changed and rollback the changes if something goes wrong.
Ok, now you're ready?
Let's start making the actual changes.
You can run the Filament upgrade script when you have Laravel and PHP requirements.
composer require filament/upgrade:"^4.0" -W --dev vendor/bin/filament-v4
It will automatically check the compatibility of PHP and Laravel versions.
So, in this case, I need to upgrade Laravel version.
Minimum required version is Laravel v11.28+. If you use Laravel 10, go straight to Laravel 12 if possible, as 11 to 12 have no breaking changes.
Of course, the easiest way to upgrade would be to use Laravel Shift for automated upgrades. Shift will also upgrade to a new app structure introduced with Laravel 11.
You can also do it manually by checking the Laravel upgrade docs or partially automating via rector rules.
In my case of Laravel 11.23.5, I just needed to run composer update
to bump it to the latest 11.x version.
Ok, Laravel updated. Again, we run this:
vendor/bin/filament-v4
It will ask what folder to perform the changes in:
Please provide a comma-separated list of directories to process breaking changes in (e.g. app, app-modules, src):
For vast majority of default Filament applications, it's app
folder.
Ok, success! Now, what has it changed?
The script will handle most of the breaking changes in your application code. The script changes namespace imports, updates methods, and types. A few examples of what it does:
actions()
now it's recordActions()
.Form
or Infolist
classes, it changes to inject Schema
.\BackedEnum
and null
additional types to the $navigationIcon
property in the Resource.At this point, if you load your page, your Filament project will probably be broken.
Don't worry, that's intended.
Because the upgrade script changed the code for v4, but not the Filament version itself. This is our next step.
See the composer require
commands that the upgrade script showed us?
composer require filament/filament:"^4.0" -W --no-updatecomposer require awcodes/filament-badgeable-column:"^3.0" -W --no-update
The upgrade script automatically checks the versions of the plugins and whether they are compatible with Filament 4. Great!
In my case, it detected the awcodes/filament-badgeable-column plugin being used, but with the older version 2.3. It also detected that there's a newer v3.0 of that plugin that supports Filament 4.
See that --no-update
? It's important. It will just update the version in composer.json
but not run the composer update
yet.
So, we run those composer require
suggested, and then we run:
composer update
Now you can reload your panel and it may work with v4!
But if it doesn't, it may be about plugin syntax.
When upgrading plugins, you need to upgrade not only their versions, but also check their upgrade guides for other syntax changes, besides the version number.
For example, we used the awcodes/filament-badgeable-column
plugin in one of our applications. In the upgrade section, it says the namespace must be updated everywhere from Awcodes\FilamentBadgeableColumn
to Awcodes\BadgeableColumn
.
Ok, the back-end portion of Filament should be working. Now, what about CSS?
Filament v4 uses Tailwind v4 internally. If your application's frontend uses Tailwind v3, but the Filament panel doesn't use a custom theme, there's no need for an upgrade.
However, you need to upgrade Tailwind to v4 if you use:
You can upgrade Tailwind manually or use the upgrade tool, which should automate the entire migration process.
First, you should update the custom theme CSS file. Previously, custom theme CSS files contained this:
@import '../../../../vendor/filament/filament/resources/css/theme.css'; @config 'tailwind.config.js';
Now, they should contain this:
@import '../../../../vendor/filament/filament/resources/css/theme.css'; @source '../../../../app/Filament';@source '../../../../resources/views/filament';
Plus, if needed, other sources in the resources and all those from the used Filament plugins. In my case, a source should be added to the awcodes/filament-badgeable-column
package and a source for tables.
@import '../../../../vendor/filament/filament/resources/css/theme.css'; @source '../../../../app/Filament';@source '../../../../resources/views/filament';@source '../../../../resources/views/tables';@source '../../../../vendor/awcodes/filament-badgeable-column/resources/**/*.blade.php';
Now, the Tailwind upgrade command can be run. Before running this command, your git directory should be clean without any changes.
npx @tailwindcss/upgrade
While this upgrade command works for this small project, it may not change everything in your project. Also, you should check the breaking changes section in the Tailwind docs under the upgrade guide page.
For example, an important change concerns PostCSS: in v3, the tailwindcss package was a PostCSS plugin, but in v4, the PostCSS plugin lives in a dedicated @tailwindcss/postcss package.
So, you need to run:
npm install @tailwindcss/postcss
And then change the postcss.config.js
to this:
export default { plugins: { '@tailwindcss/postcss': {}, },}
Then, you should finally see the project upgraded to v4. You can judge it by the color of the default v4 button.
In addition to the main syntax upgrade script, there's also a Directory Structure upgrade script for Filament v4.
Filament v4 introduces a new default directory structure for your Filament Resources and Clusters. You may upgrade to v4 but still use an older v3 directory structure.
This structure is optional, just as when going from Laravel 10 to Laravel 11, the new Laravel 11 skeleton was optional. You may have stayed with the older file/folder structure, even on the new Laravel 11 version.
However, if you do want to upgrade to the new structure, there is an automated command inside the same filament/upgrade
package.
First, run the command with the --dry-run
option to see what changes will be made.
php artisan filament:upgrade-directory-structure-to-v4 --dry-run
After checking the changes, they can be applied with the same command without adding the --dry-run
option.
php artisan filament:upgrade-directory-structure-to-v4
All done? Not necessarily.
Even after two upgrade scripts, there may still be things to do manually.
With Filament v4, Forms and Infolists are in their own Schema classes, and tables are in their Table class. This structure is provided as a code quality tips. When upgrading from v3, at the time of writing this article, there is no automated command or script to do it.
In my opinion, the easiest way to use this structure would be to migrate one resource to it and then ask AI to analyze it and create the same structure for other resources.
Now, we've finished the upgrade, and the filament/upgrade
package can be removed.
composer remove filament/upgrade
As you can see, upgrading the project to v4 is not so smooth, especially if you use many Filament plugins or custom themes.
So, it may be a good strategy to wait until they all properly support Filament 4 and enough troubleshooting tutorials have been written, to solve potential issues while upgrading.
But if you feel brave and capable of resolving everything yourself, dive into it!
A few of our Premium Examples: