Cos’è filament Laravel e come usarlo

Laravel Filament è uno di quegli strumenti che, una volta provati, ti fanno chiedere come hai fatto a farne a meno prima.

È un framework di sviluppo “accelerato” costruito sullo stack TALL — Tailwind CSS, Alpine.js, Laravel e Livewire — e il suo obiettivo è uno solo: farti smettere di ricostruire da zero le stesse interfacce di amministrazione ogni volta che inizi un nuovo progetto.

Non è solo un admin panel preconfezionato. Filament è una raccolta di componenti full-stack — form, tabelle, notifiche, widget, azioni — che puoi combinare e personalizzare, ma che funzionano già benissimo così come sono appena installati.

Tempo di lettura: 8 minuti

In questo tutorial vediamo tutti i passaggi per impostare il tuo progetto con Laravel Filament, e poi ti mostro come l’ho usato su un progetto reale di gestione immobiliare.

Componenti di Laravel Filament

Prima di installare qualsiasi cosa, vale la pena capire cosa mette sul tavolo Filament.

Questi sono i componenti principali:

• Panel Builder — è il cuore di Filament: genera un pannello di amministrazione completo con pochi comandi. Puoi usarlo per un backoffice interno, per una piattaforma SaaS o per qualsiasi area riservata tu stia costruendo. La parte interessante è che il pannello è già configurato con autenticazione, navigazione laterale e layout responsive — non devi costruire niente di tutto questo a mano.
• Form Builder — oltre 25 componenti di input già pronti, da usare dentro e fuori dal Panel Builder. La cosa che apprezzo di più è che ogni campo è già pensato per Livewire: reattività, validazione e binding sono gestiti automaticamente, senza scrivere JavaScript. Trovi la documentazione ufficiale su filamentphp.com.
• Table Builder — crea datatable interattivi basati su Livewire con ordinamento, filtraggio e paginazione già integrati. Funziona benissimo per qualsiasi tipo di lista dati, non solo dentro il pannello admin.
• Notifiche — messaggi in tempo reale per l’utente, del tipo “Salvataggio completato” o “Errore durante l’upload”. Si integrano col Panel Builder ma puoi usarle anche in qualsiasi altra pagina Livewire della tua app.
• Azioni — apri modal e slide-over per mantenere un’esperienza utente fluida senza ricaricare la pagina. Utili per conferme di eliminazione, form rapidi, anteprima dati.
• Infolist Builder — visualizza dati in sola lettura su una determinata entità. Sembra meno glamour degli altri componenti, ma ti fa risparmiare un sacco di tempo quando devi costruire pagine di dettaglio.
• Widget — crea dashboard con grafici e statistiche in tempo reale. Ti consentono di costruire visualizzazioni dinamiche per il monitoraggio senza tirare in ballo librerie JavaScript esterne.

Concetti Fondamentati

Vale la pena fermarsi un momento sul perché Filament usa lo stack TALL, perché non è una scelta casuale.

Tailwind CSS gestisce lo stile senza che tu debba scrivere un rigo di CSS personalizzato. Alpine.js aggiunge interattività leggera lato client — dropdown, modal, toggle — senza tirare in ballo React o Vue. Livewire è il collante tra front-end e back-end: aggiorna il DOM in modo reattivo senza ricaricare la pagina, restando però 100% in PHP. E Laravel è la base su cui tutto si appoggia.

Il risultato pratico è che puoi costruire interfacce dinamiche e full-stack usando quasi solo PHP e Blade — senza toccare un bundler JavaScript, senza gestire un’API separata, senza configurare un frontend indipendente. Per team Laravel puri o sviluppatori che vogliono muoversi veloci, è un vantaggio enorme.

Installazione di Laravel Filament

Procediamo con l’installazione. Prima di andare avanti, assicurati di avere questi requisiti minimi:

PHP 8.1+
Laravel v10.0+
LiveWire v3.0+

Filament v3 non funziona su versioni precedenti di queste dipendenze.

Step 1 — Installa Laravel

Crea un nuovo progetto Laravel con l’ultima versione disponibile:

composer create-project laravel/laravel filament-tutorial

Una volta completata l’installazione, aggiorna il file .env con le credenziali del tuo database ed esegui le migrazioni. Filament ha bisogno che le tabelle di base esistano già prima di procedere:

php artisan migrate

Step 2 — Installa Filament

Aggiungi Filament al progetto con Composer:

composer require filament/filament:"^3.0-stable" -W

Step 3 — Installa il Panel Builder

Ora installa il Panel Builder, che creerà e registrerà automaticamente un nuovo service provider Laravel chiamato AdminPanelProvider:

php artisan filament:install --panels

Il file viene creato in app/Providers/Filament/AdminPanelProvider.php — è qui che in futuro configurerai il comportamento del pannello: colori, logo, navigazione, middleware. Per ora non toccare nulla, il default funziona già.

Una nota utile: il pannello viene installato con tutti i pacchetti principali già inclusi (Form Builder, Table Builder, Notifications, Actions, Infolists e Widgets). Non devi installarli separatamente.

Step 4 — Crea il primo utente amministratore

Crea il tuo primo utente per accedere al pannello:

php artisan make:filament-user

Il comando ti chiederà nome, email e password. Una volta creato, vedrai questo output:

php artisan make:filament-userName: > bloginnovazioneEmail address: > bloginnovazione@gmail.comPassword: >✓ bloginnovazione@gmail.com may now log in at http://localhost/admin/login.

Avvia l’applicazione e accedi al pannello

Lancia il server di sviluppo:

php artisan serve

Apri il browser e aggiungi /admin all’URL. Vedrai la pagina di login di Filament

inserisci le credenziali dell’utente appena creato e sei dentro.

Progetto reale: gestionale per la vendita immobiliare

Per capire come Filament si comporta su un caso concreto, ho costruito un gestionale per la vendita immobiliare: traccia cantieri, immobili, canali di vendita, attività di marketing e transazioni. È un caso d’uso con relazioni tra modelli, upload di immagini, editor rich text e tabelle filtrabili — tutto quello che Filament promette di semplificare, messo alla prova su dati reali.

Il codice completo è disponibile su GitHub se vuoi seguire il progetto mentre leggi o usarlo come punto di partenza: repository laravel11-filament-worksite.

Le Resource create

Nel progetto ho creato cinque Resource:

• ChannelResource — gestione dei canali di vendita
• HouseResource — gestione degli immobili
• MarketingResource — gestione delle attività di marketing
• SaleResource — gestione delle vendite
• WorkSite — gestione dei cantieri

Ho organizzato il menu di navigazione raggruppando le voci per area. Qui sotto le impostazioni della classe ChannelResource come esempio: la voce Channel è raggruppata nel gruppo Marketing, con icona globe-alt, etichetta “Canali” e quinta nell’ordine delle voci di navigazione:

protected static ?string $model = Channel::class;
protected static ?string $navigationGroup = 'Marketing';
protected static ?string $navigationIcon = 'heroicon-o-globe-alt';
protected static ?string $navigationLabel = 'Canali';
protected static ?int $navigationSort = 5;

Il Form della gestione Immobili

Il Form degli immobili usa diverse tipologie di campi. Vediamoli uno per uno con la spiegazione delle scelte fatte.

Select per la scelta del cantiere — sfrutta la relazione uno-a-molti worksite definita nel model, evitando di gestire manualmente l’ID della relazione:

Forms\Components\Select::make('worksite_id')
    ->label('Cantiere')
    ->relationship('worksite', 'name')
    ->required(),

TextInput per il codice immobile — campo obbligatorio con lunghezza massima di 15 caratteri, per evitare codici troppo lunghi nel database:

Forms\Components\TextInput::make('code')
    ->label('Codice')
    ->required()
    ->maxLength(15),

Select per la tipologia — opzioni fisse tra appartamento e villa. Ho usato un array di opzioni invece di una relazione perché i tipi di immobile sono un insieme chiuso e non cambieranno nel tempo:

Forms\Components\Select::make('type')
    ->label('Tipologia')
    ->options([
        'appartamento' => 'Appartamento',
        'villa' => 'Villa',
    ]),

FileUpload per l’immagine dell’immobile — questo è il componente più articolato del form. Ho configurato il resize automatico a 300×150px in formato 16:9 per normalizzare le dimensioni delle foto caricate da utenti diversi: senza questo, il layout della tabella si rompe ogni volta che qualcuno carica un’immagine verticale da smartphone:

Forms\Components\FileUpload::make('attachment')
    ->image()
    ->preserveFilenames()
    ->imageResizeMode('cover')
    ->imageCropAspectRatio('16:9')
    ->imageResizeTargetWidth('300')
    ->imageResizeTargetHeight('150')
    ->imagePreviewHeight('250')
    ->loadingIndicatorPosition('left')
    ->panelAspectRatio('2:1')
    ->panelLayout('integrated')
    ->removeUploadedFileButtonPosition('right')
    ->uploadButtonPosition('left')
    ->uploadProgressIndicatorPosition('left'),

Nota: preserveFilenames mantiene il nome originale del file caricato — utile quando i commerciali nominano le foto con codici interni che vogliono ritrovare in seguito.

RichEditor per il campo followup — ho scelto il RichEditor per questo campo perché è quello dove i commerciali annotano lo stato della trattativa. Ha bisogno di formattazione base (grassetto, liste, link) che un semplice TextInput non darebbe. Filament lo integra senza configurazione aggiuntiva:

Forms\Components\RichEditor::make('followup')
    ->label('Follow Up')
    ->maxLength(255),

La Table degli immobili

Nella lista degli immobili ho usato due colonne principali.

ImageColumn — visualizza la foto dell’immobile direttamente nella tabella, leggendola dal campo attachment. Evita di dover aprire il dettaglio per vedere di che immobile si tratta:

Tables\Columns\ImageColumn::make('attachment')
    ->label('Foto'),

TextColumn per il prezzo — ho abilitato sia la ricerca che l’ordinamento sul prezzo: i commerciali filtrano spesso per fascia di prezzo, e avere l’ordinamento diretto sulla colonna è molto più comodo di un filtro separato:

Tables\Columns\TextColumn::make('price')
    ->label('Prezzo')
    ->searchable()
    ->sortable(),

Considerazioni finali

Lavorare con Filament su questo progetto ha confermato quello che mi aspettavo: la parte che di solito richiede più tempo — costruire l’interfaccia di amministrazione — è diventata la parte più rapida. Il grosso del tempo l’ho speso sulla logica di business, che è esattamente dove dovrebbe stare l’attenzione.

Se stai valutando Filament per un tuo progetto Laravel, il modo migliore per capire se fa al caso tuo è provarlo su un caso concreto — anche piccolo — piuttosto che leggere la documentazione dall’inizio alla fine. Il repository su GitHub che ho linkato sopra può essere un buon punto di partenza.

Se vuoi approfondire la gestione dei permessi in un progetto Laravel, puoi leggere il nostro articolo sull’impostazione dei ruoli con Laravel Spatie.

Ercole Palmeri