> ## Documentation Index > Fetch the complete documentation index at: https://kawax.biz/llms.txt > Use this file to discover all available pages before exploring further. # ⚡Introduzione a Livewire 4 — creare UI reattive senza JavaScript > Spiega come costruire UI interattive senza scrivere JavaScript usando Livewire 4, il pacchetto first-party di Laravel, dall'installazione a esempi pratici di codice. ## Cos'è Livewire Fino a poco tempo fa, per creare UI dinamiche in Laravel bisognava affiancare un framework JavaScript come Vue.js o React, oppure scrivere direttamente richieste AJAX. **Livewire** è il pacchetto per Laravel che risolve questo problema. Con solo PHP e Blade puoi costruire UI reattive. Validazione in tempo reale dei form, ricerca live, contatori e simili: funzioni che tradizionalmente richiedevano JavaScript possono essere implementate interamente in PHP. Livewire 4 gira su Laravel 10 o superiore e PHP 8.1 o superiore. La versione più recente è Livewire 4. ### Panoramica del funzionamento Un componente Livewire è la combinazione di una classe PHP lato server e di un template Blade. Quando l'utente clicca un pulsante o compila un form, Livewire invia dietro le quinte una richiesta AJAX, esegue PHP e riflette nella pagina solo le parti modificate. Lo sviluppatore può scrivere solo in PHP senza preoccuparsi del meccanismo. *** ## Installazione Nella directory root dell'applicazione Laravel esegui il comando seguente. ```shell theme={null} composer require livewire/livewire ``` Il rilevamento automatico dei pacchetti di Laravel è attivo, quindi non serve alcuna configurazione aggiuntiva. ### Creazione del layout Per usarlo come componente a pagina intera è necessario un file di layout. Puoi generarlo con il comando Artisan seguente. ```shell theme={null} php artisan livewire:layout ``` Viene generato `resources/views/layouts/app.blade.php`. ```blade theme={null} {{ $title ?? config('app.name') }} @vite(['resources/css/app.css', 'resources/js/app.js']) @livewireStyles {{ $slot }} @livewireScripts ``` `@livewireStyles` e `@livewireScripts` caricano automaticamente gli asset di Livewire e Alpine.js. *** ## Il primo componente Per generare un componente Livewire c'è un comando Artisan. Proviamo a creare un semplice contatore. ```shell theme={null} php artisan make:livewire Counter ``` Il comando genera un componente single-file chiamato `resources/views/components/⚡counter.blade.php`. Il ⚡ nel nome del file serve a identificare a colpo d'occhio un componente Livewire. Migliora la leggibilità nell'editor. Se non ti serve puoi disabilitarlo nelle impostazioni. Modifica il file generato come segue. ```blade theme={null} count++; } public function decrement(): void { $this->count--; } }; ?>

Conteggio: {{ $count }}

``` Per incorporare il componente in un template Blade usa la normale sintassi dei componenti Blade. ```blade theme={null} ``` Ogni clic aggiorna il conteggio senza ricaricare la pagina. `wire:click` è il meccanismo che, al posto del JavaScript, richiama un metodo PHP. *** ## Proprietà e azioni ### Proprietà — `wire:model` Con la direttiva `wire:model` puoi effettuare il binding bidirezionale tra un elemento di input e una proprietà del componente. ```blade theme={null}

Ciao {{ $name }} ({{ $email }})

``` Per impostazione predefinita `wire:model` si sincronizza con il server solo all'esecuzione di un'azione (invio del form, ecc.). Se vuoi sincronizzare a ogni input, aggiungi il modificatore `.live`. | Sintassi | Comportamento | | ---------------------- | ---------------------------------------------------------------------------- | | `wire:model` | Sincronizza solo all'esecuzione di un'azione (invio form, ecc., predefinito) | | `wire:model.live` | Invia una richiesta a ogni input | | `wire:model.blur` | Sincronizza alla perdita del focus (nessuna richiesta) | | `wire:model.live.blur` | Invia una richiesta alla perdita del focus | ### Azioni — `wire:click`, `wire:submit` `wire:click` associa un metodo all'evento click, `wire:submit` all'evento di invio del form. ```blade theme={null} $this->taskName]); $this->taskName = ''; } public function render() { return $this->view([ 'tasks' => Task::latest()->get(), ]); } }; ?>

{{ $task->name }}

``` *** ## Validazione in tempo reale In Livewire 4 puoi definire regole di validazione direttamente sulle proprietà con l'attributo `#[Validate]`. ```blade theme={null} validate(); Post::create([ 'title' => $this->title, 'content' => $this->content, ]); $this->reset(['title', 'content']); session()->flash('message', 'Articolo salvato.'); } }; ?>

@if (session('message'))

@endif

``` Le proprietà con `#[Validate]` vengono validate automaticamente a ogni aggiornamento. Combinandolo con `wire:model.live.blur` si ottiene un'esperienza di validazione in tempo reale in cui il messaggio d'errore compare appena si perde il focus. `$this->validate()` valida tutte le proprietà insieme al momento dell'invio del form. Il pattern raccomandato è usarlo in combinazione con la validazione automatica di `#[Validate]` a due livelli. *** ## Hook di ciclo di vita Un componente Livewire ha diversi hook di ciclo di vita. | Hook | Timing | | ----------------------------- | --------------------------------------------------------------------- | | `mount()` | Quando il componente viene creato per la prima volta (una sola volta) | | `boot()` | All'inizio di ogni richiesta (sia la prima che quelle successive) | | `updating($property, $value)` | Subito prima dell'aggiornamento della proprietà | | `updated($property)` | Subito dopo l'aggiornamento della proprietà | | `rendering()` | Prima del rendering della vista | | `rendered()` | Dopo il rendering della vista | | `dehydrate()` | Alla fine di ogni richiesta | ### `mount()` — inizializzazione `mount()` si usa per inizializzare il componente. Sostituisce il costruttore. ```blade theme={null} name = Auth::user()->name; $this->email = Auth::user()->email; } }; ?>

Nome: {{ $name }}

Email: {{ $email }}

``` ### `updated()` — elaborazione dopo la modifica di una proprietà Se vuoi eseguire qualcosa dopo l'aggiornamento di una proprietà, usa `updated()`. Per restringere a una proprietà specifica, includila nel nome del metodo. ```blade theme={null} username = strtolower($this->username); } }; ?>

Nome utente: {{ $username }}

``` A ogni input il valore viene automaticamente convertito in minuscolo. *** ## Integrazione con Laravel ### Uso dei modelli Eloquent Livewire può contenere direttamente modelli Eloquent nelle proprietà. ```blade theme={null} user = $user; } #[Validate('required|min:2')] public string $name = ''; public function save(): void { $this->validate(); $this->user->update(['name' => $this->name]); session()->flash('message', 'Profilo aggiornato.'); } public function render() { return $this->view(); } }; ?>

@if (session('message'))

@endif

``` ### Form object Puoi mantenere semplici i componenti estraendo i form complessi in un form object. ```shell theme={null} php artisan livewire:form PostForm ``` ```php theme={null} namespace App\Livewire\Forms; use Livewire\Attributes\Validate; use Livewire\Form; use App\Models\Post; class PostForm extends Form { #[Validate('required|min:3')] public string $title = ''; #[Validate('required|min:10')] public string $content = ''; public function store(): void { Post::create($this->only(['title', 'content'])); } } ``` Usa il form object dal componente. ```blade theme={null} form->validate(); $this->form->store(); $this->form->reset(); session()->flash('message', 'Post creato.'); } }; ?>

``` *** ## Conclusioni Ecco un riepilogo dei casi d'uso in cui Livewire eccelle. | Caso d'uso | Cosa realizzi con Livewire | | --------------------------- | --------------------------------------------------------- | | Gestione dei form | Validazione in tempo reale e visualizzazione degli errori | | Elenchi di dati | Ricerca live, ordinamento, paginazione | | Contatori e toggle | Aggiornamenti UI senza ricaricare la pagina | | Pannelli di amministrazione | Operazioni CRUD collegate direttamente a Eloquent | | Form a wizard | Gestione degli step implementata in PHP | Se sei un ingegnere Laravel con esperienza in Blade, con Livewire puoi iniziare da subito. Il suo punto di forza è realizzare UI interattive senza il costo di apprendimento di un framework JavaScript. Quando servono interazioni molto avanzate, in stile SPA, Inertia.js è più indicato, ma per usi come form, pannelli di amministrazione o tabelle dati Livewire spesso permette un'implementazione più semplice. Prova a partire da un piccolo componente. Per tutte le funzionalità di Livewire (file upload, paginazione, testing, ecc.) consulta la documentazione ufficiale. ## Related topics - [Frontend](/it/frontend.md) - [Introduzione all'autenticazione](/it/authentication.md) - [Conoscenze necessarie prima di iniziare con Laravel](/it/true-tutorial.md) - [Starter kit](/it/starter-kits.md) - [Introduzione a React — le basi per usarlo con Inertia × Laravel](/it/blog/react-introduction.md)