Use with Livewire

Integrate Laravel Data with Livewire components for reactive data objects

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.