> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend
> Guida introduttiva per decidere come combinare Blade, Livewire, Inertia, React, Vue, Svelte, SPA e Vite in Laravel 13.
## Panoramica
Laravel è un framework backend, ma cura anche l'esperienza di sviluppo estesa al frontend.\
In Laravel 13 hai a disposizione sia un approccio centrato su PHP sia uno che sfrutta framework JavaScript come React, Vue e Svelte.
Per scegliere l'approccio più adatto, ragiona su questi tre punti:
* Vuoi scrivere la UI principalmente in **PHP**?
* Vuoi scrivere la UI principalmente in **JavaScript / TypeScript**?
* Vuoi tenere tutto in un unico repository o separare API e SPA?
```mermaid theme={null}
flowchart TD
A["Applicazione Laravel"] --> B{"Dove costruire la UI?"}
A --> G["Build degli asset con Vite"]
B --> C["Blade"]
B --> D["Livewire + Alpine.js"]
B --> E["Inertia + React / Vue / Svelte"]
B --> F["API + SPA indipendente"]
C --> C1["Restituisci HTML dal server"]
D --> D1["Crea UI dinamiche guidate da PHP"]
E --> E1["Costruisci un'esperienza simile a una SPA in un unico repository"]
F --> F1["Integra frontend separati o app mobili"]
G --> C1
G --> D1
G --> E1
G --> F1
```
## Procedere con PHP
### Blade
[Blade](/it/blade) è il motore di template standard di Laravel. Da controller o route restituisci le viste e invii al browser l'HTML generato sul server.
**Pro**
* Si integra naturalmente con routing, validazione e autenticazione di Laravel
* Si riesce a fare tutto in PHP; costo di apprendimento contenuto
* Adatto a pagine in cui SEO e first paint sono importanti
**Contro**
* Ogni transizione di pagina o invio form tende a ricaricare tutta la pagina
* Le interazioni complesse richiedono aiuto da JavaScript
Blade si presta bene per pannelli di amministrazione, tool interni, pagine incentrate sui contenuti e applicazioni con molti form.
### Livewire
[Laravel Livewire](https://livewire.laravel.com) è un approccio che parte da Blade ma consente di realizzare UI più dinamiche restando principalmente in PHP. Puoi costruire interazioni come modali, ricerche, editing inline con un'esperienza vicina a React o Vue.
**Pro**
* Puoi creare UI dinamiche come estensione di PHP e Blade
* Si lega bene a gestione dello stato e validazione di Laravel
* Se vuoi aggiungere JavaScript solo dove serve, si combina bene con Alpine.js
**Contro**
* Non è forte come i framework JavaScript nella gestione di stati client complessi
* Non sempre adatto a SPA di grandi dimensioni in cui la responsabilità del frontend è preponderante
Se vuoi approfondire Livewire, consulta [Introduzione a Livewire](/it/blog/livewire-introduction).
### Starter kit PHP-first
Gli [starter kit](/it/starter-kits) di Laravel 13 offrono un'opzione basata su **Livewire** per i team che vogliono creare, restando su PHP, anche **UI dinamiche**. Puoi ovviamente partire con la sola Blade, ma la scelta PHP-first pronta all'uso negli starter kit è Livewire. Include autenticazione, layout e configurazione di Vite: il modo più rapido per iniziare lo sviluppo.
## Usare un framework JavaScript
### Inertia + React / Vue / Svelte
[Inertia](https://inertiajs.com) fa da ponte tra Laravel — sfruttandone route, controller e autenticazione — e la costruzione delle pagine con React, Vue o Svelte. Senza separare completamente un API server e una SPA, puoi realizzare UI moderne in un'unica applicazione Laravel.
**Pro**
* Puoi usare il modello a componenti di React / Vue / Svelte
* Routing e autenticazione restano lato Laravel
* Gestisci facilmente backend e frontend nello stesso repository
**Contro**
* Rispetto alla sola Blade, aumentano le tecnologie da imparare
* Servono conoscenze della toolchain Node.js e spesso TypeScript
Negli starter kit ufficiali di Laravel 13 puoi scegliere fin da subito **React / Vue / Svelte + Inertia**.
Per approfondire, consulta [Introduzione a Inertia](/it/blog/inertia-introduction), [Introduzione a React](/it/blog/react-introduction), [Introduzione a Vue](/it/blog/vue-introduction) e [Introduzione a Svelte](/it/blog/svelte-introduction).
### Separare API e SPA
Puoi anche scegliere di separare completamente il frontend da Laravel e consumare le API da SPA distinte o app mobili. Adatto quando più client condividono lo stesso backend.
In questo caso, Laravel svolge principalmente questi ruoli:
* Espone le route API
* Autenticazione/autorizzazione (ad esempio [Sanctum](/it/sanctum))
* Formattazione delle risposte JSON (ad esempio [Eloquent API Resources](/it/eloquent-resources))
**Pro**
* Facile distribuire su più client (web, mobile, desktop)
* Puoi disaccoppiare la scelta della tecnologia frontend dal core di Laravel
**Contro**
* Autenticazione, fetching dei dati e deploy vanno progettati separatamente
* Tende a essere più complesso di una configurazione contenuta in un'unica app Laravel
### Starter kit JavaScript-first
Usando uno [starter kit](/it/starter-kits) parti con Inertia, React / Vue / Svelte, Tailwind CSS e Vite già configurati. Le schermate di autenticazione sono pronte fin da subito, così ti concentri più facilmente sullo sviluppo della UI.
## Fare il build degli asset con Vite
Qualunque approccio tu scelga, in Laravel 13 di norma userai [Vite](/it/vite) per fare il build di CSS e JavaScript. Con Blade e Livewire raggruppi script e stili leggeri, con Inertia raggruppi tutto il codice frontend dell'applicazione.
I vantaggi di Vite:
* HMR veloce durante lo sviluppo locale
* Bundle e versioning degli asset di produzione
* Integrazione con la direttiva `@vite()` di Laravel
Negli starter kit di Laravel 13 la configurazione frontend basata su Vite è già impostata.
## Confronto tra gli approcci
| Approccio | Casi d'uso adatti | Pro | Contro |
| ------------------------------ | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| Blade | Pagine incentrate sui contenuti, back office con molti form | Semplice e facile da imparare. Si integra naturalmente con le funzionalità standard di Laravel | Nelle UI evolute il refresh dell'intera pagina cresce |
| Livewire | Applicazioni gestionali dinamiche in cui vuoi restare in PHP | Puoi creare UI reattive restando in PHP | Meno adatto a gestioni di stato client complesse |
| Inertia + React / Vue / Svelte | App che vogliono conciliare UI moderna e gestione unificata con Laravel | Costruisci un'esperienza simile a SPA in un unico repository | Serve dimestichezza con JavaScript / TypeScript |
| API + SPA indipendente | Prodotti con più client o integrazione mobile | Più semplice distribuire il frontend in autonomia | Autenticazione, deploy e operazioni tendono a essere complessi |
## Prossimi passi
Rivedi le basi del rendering lato server.
Confronta le configurazioni iniziali di React, Vue, Svelte e Livewire.
Impara il flusso di dev server, HMR e build di produzione.
Impara come Inertia collega Laravel e i framework JavaScript.
## Related topics
- [Come creare uno starter kit per Laravel](/it/advanced/starter-kit-creation.md)
- [Conoscenze necessarie prima di iniziare con Laravel](/it/true-tutorial.md)
- [Streaming](/it/packages/laravel-copilot-sdk/streaming.md)
- [Bundle degli asset con Vite](/it/vite.md)
- [Installazione](/it/installation.md)