Skip to main content
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple without leaving the comfort of Laravel.
Laravel Data works excellently with Laravel Livewire.

​
Using Wireable (Traditional)

Use data objects as Livewire component properties: 
class Song extends Component
{
    public SongData $song;

    public function mount(int $id)
    {
        $this->song = SongData::from(Song::findOrFail($id));
    }

    public function render()
    {
        return view('livewire.song');
    }
}

​
Requirements

  1. Implement Wireable on your data class
  2. Use the WireableData trait
class SongData extends Data implements Wireable
{
    use WireableData;

    public function __construct(
        public string $title,
        public string $artist,
    ) {
    }
}

​
Livewire Synths (Experimental)

This is an experimental feature and subject to change.
Livewire Synths allow you to use data objects without making them Wireable. Enable in config/data.php: 
'livewire' => [
    'enable_synths' => true,
]
Use data objects directly: 
class SongUpdateComponent extends Component
{
    public SongData $data;

    public function mount(public int $id): void
    {
        $this->data = SongData::from(Song::findOrFail($id));
    }

    public function save(): void
    {
        Artist::findOrFail($this->id)->update($this->data->toArray());
    }

    public function render(): string
    {
        return <<<'BLADE'
        <div>
            <h1>Songs</h1>
            <input type="text" wire:model.live="data.title">
            <input type="text" wire:model.live="data.artist">
            <p>Title: {{ $data->title }}</p>
            <p>Artist: {{ $data->artist }}</p>
            <button wire:click="save">Save</button>
        </div>
        BLADE;
    }
}

​
Lazy Properties

Lazy properties won’t be sent over the wire unless included.
Always include properties permanently because data objects are transformed and cast again between Livewire requests.
use Spatie\LaravelData\Lazy;

class LazySongData extends Data
{
    public function __construct(
        public Lazy|ArtistData $artist,
        public Lazy|string $title,
    ) {}    
}
In your Livewire view: 
$this->data->artist->name; // Works (nested data object)
$this->data->title; // Does not work (lazy non-data property)
You can query lazy nested data objects, but not lazy properties that aren’t data objects.

​
Validation

Laravel Data does not provide validation when using Livewire. You must implement validation yourself.
This is because laravel-data only validates payloads during creation, not existing data objects. The validation could technically happen when hydrating, but we cannot guarantee that every hydration happens with validated data.