Livewire 3.6 Released

Laravel Livewire released v3.6 this week with new HTML directives for showing and hiding DOM elements and JavaScript actions.

#JavaScript Actions

Caleb Porzio added support for defining JavaScript actions "which are JavaScript functions that can be called from wire:click or $wire, to either run client side code only or to apply optimistic updates before triggering a server request."

Here's an example from Pull Request #9202:

<?php
use Livewire\Volt\Component;
 
new class extends Component {
    public function save()
    {
        // ...
    }
};
?>
 
<div>
    <button wire:click="doSomething">Do Something</button>
</div>
 
@script
<script>
    $js('doSomething', () => {
        console.log('doSomething');
 
        $wire.save()
    });
</script>
@endscript

You can also call JavaScript actions from PHP using the ->js() method:

$this->js('onPostSaved');

You can learn more about JavaScript actions in the Actions documentation.

#New HTML Directives

Josh Hanley contributed the wire:show and wire:text directives, and Caleb Porzio contributed wire:cloak and wire:transition directives.

The wire:show and wire:text directives are Livewire equivalents of Alpine's x-show and x-text. The wire:show directive, for example, toggles an element's visibility using CSS

<div>
    <button x-on:click="$wire.showModal = true">New Post</button>
 
    <div wire:show="showModal">
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>
 
            <button type="submit">Save Post</button>
        </form>
    </div>
</div>

The wire:text directive dynamically updates an element's content, making it useful for building optimistic UIs:

<div>
    <button x-on:click="$wire.likes++; $wire.like()">❤️ Like</button>
 
    Likes: <span wire:text="likes"></span>
</div>

You can learn more about these new directives from Livewire's documentation:

• wire:cloak (docs)
• wire:show (docs)
• wire:text (docs)
• wire:transition (docs)

#Release Notes

You can see the complete list of new features from the diff between 3.5.20 and 3.6.0 on GitHub. You can learn more about these features and more from the Livewire documentation.