AlpineJS

There are lots of instances where a page interaction doesn't warrant a full server-roundtrip, like toggling a modal.

For these cases, AlpineJS is the perfect companion to Livewire.

It allows you to sprinkle JavaScript behavior directly into your markup in a declarative/reactive way that should feel very similar to VueJS (If that's what you're used to).

Using Alpine Inside Of Livewire

Livewire supports Alpine out of the box and works pretty hard to make the combination as smooth as possible.

Note: You must install Alpine in order to use it. Check out Alpine repo for installation instructions.

Here's an example of using AlpineJS for "dropdown" functionality INSIDE a Livewire component's view.

        
 1<div>
 2    ...
 3 
 4    <div x-data="{ open: false }">
 5        <button @click="open = true">Show More...</button>
 6 
 7        <ul x-show="open" @click.away="open = false">
 8            <li><button wire:click="archive">Archive</button></li>
 9            <li><button wire:click="delete">Delete</button></li>
10        </ul>
11    </div>
12</div>    

Extracting Reusable Blade Components

If you are not already used to each tool on its own, mixing the syntaxes of both can be a bit confusing.

Because of this, when possible, you should extract the Alpine parts to reusable Blade components for consumption inside of Livewire (and anywhere in your app).

Here is an example (Using Laravel 7 Blade component tag syntax).

The Livewire View:

        
 1<div>
 2    ...
 3 
 4    <x-dropdown>
 5        <x-slot name="trigger">
 6            <button>Show More...</button>
 7        </x-slot>
 8 
 9        <ul>
10            <li><button wire:click="archive">Archive</button></li>
11            <li><button wire:click="delete">Delete</button></li>
12        </ul>
13    </x-dropdown>
14</div>    

The Reusable "dropdown" Blade Component:

        
1<div x-data="{ open: false }">
2    <span @click="open = true">{{ $trigger }}</span>
3 
4    <div x-show="open" @click.away="open = false">
5        {{ $slot }}
6    </div>
7</div>    

Now, the Livewire and Alpine syntaxes are completely seperate, AND you have a reusable Blade component to use from other components.

Creating A DatePicker Component

A common use case for JavaScript inside Livewire is custom form inputs. Things like datepickers, color-pickers, etc... are often essential to your app.

By using the same pattern above, (and adding some extra sauce), we can utilize Alpine to make interacting with these types of JavaScript components a breeze.

Let's create a re-usable Blade component called date-picker that we can use to bind some data to in Livewire using wire:model.

Here's how we will be using it:

        
1<form wire:submit.prevent="schedule">
2    <label for="title">Event Title</label>
3    <input wire:model="title" id="title" type="text">
4 
5    <label for="date">Event Date</label>
6    <x-date-picker wire:model="date" id="date"/>
7 
8    <button>Schedule Event</button>
9</form>    

For this component we will be using the Pikaday library.

According to the docs, the most basic usage of the package (after including the assets) looks like this:

        
1<input type="text" id="datepicker">
2 
3<script>
4    new Pikaday({ field: document.getElementById('datepicker') })
5</script>    

All you need is an <input> element, and Pikaday will add all the extra date-picker behavior for you.

Now let's see how we might write a re-usable Blade component for this library.

The date-picker Reusable Blade Component:

        
1<input
2    x-data
3    x-ref="input"
4    x-init="new Pikaday({ field: $refs.input })"
5    type="text"
6    {{ $attributes }}
7>    

Note: The {{ $attributes }} expression is a mechanism in Laravel 7 and above to forward extra HTML attributes declared on the component tag.

Forwarding wire:model input Events

Under the hood, wire:model adds an event listener to update a property every time the input event is dispatched on or under the element. Another way to communicate between Livewire and Alpine is by using Alpine to dispatch an input event with some data within or on an element with wire:model on it.

Let's create a contrived example where when a user clicks a one button a property called $foo is set to bar, and when a user clicks another button, $foo is set to baz.

Within A Livewire Component's View:

        
1<div>
2    <div wire:model="foo">
3        <button x-data @click="$dispatch('input', 'bar')">Set to "bar"</button>
4        <button x-data @click="$dispatch('input', 'baz')">Set to "baz"</button>
5    </div>
6</div>    

A more real-world example would be creating a "color-picker" Blade component that might be consumed inside a Livewire component.

Color-picker Component Usage:

        
1<div>
2    <x-color-picker wire:model="color"/>
3</div>    

For the component definition, we will be using a third-party color-picker lib called Vanilla Picker.

This sample assumes you have it loaded on the page.

Color-picker Blade Component Definition (Un-commented):

        
 1<div
 2    x-data="{ color: '#ffffff' }"
 3    x-init="
 4        picker = new Picker($refs.button);
 5        picker.onDone = rawColor => {
 6            color = rawColor.hex;
 7            $dispatch('input', color)
 8        }
 9    "
10    wire:ignore
11    {{ $attributes }}
12>
13    <span x-text="color" :style="`background: ${color}`"></span>
14    <button x-ref="button">Change</button>
15</div>    

Color-picker Blade Component Definition (Commented):

        
 1<div
 2    x-data="{ color: '#ffffff' }"
 3    x-init="
 4        // Wire up to show the picker when clicking the 'Change' button.
 5        picker = new Picker($refs.button);
 6        // Run this callback every time a new color is picked.
 7        picker.onDone = rawColor => {
 8            // Set the Alpine 'color' property.
 9            color = rawColor.hex;
10            // Dispatch the color property for 'wire:model' to pick up.
11            $dispatch('input', color)
12        }
13    "
14    // Vanilla Picker will attach its own DOM inside this element, so we need to
15    // add `wire:ignore` to tell Livewire to skip DOM-diffing for it.
16    wire:ignore
17    // Forward the any attributes added to the component tag like `wire:model=color`
18    {{ $attributes }}
19>
20    <!-- Show the current color value with the backgound color set to the chosen color. -->
21    <span x-text="color" :style="`background: ${color}`"></span>
22    <!-- When this button is clicked, the color-picker dialogue is shown. -->
23    <button x-ref="button">Change</button>
24</div>    

Ignoring DOM-changes (using wire:ignore)

Fortunately a library like Pikaday adds its extra DOM at the end of the page. Many other libraries manipulate the DOM as soon as they are initialized and continue to mutate the DOM as you interact with them.

When this happens, it's hard for Livewire to keep track of what DOM manipulations you want to preserve on component updates, and which you want to discard.

To tell Livewire to ignore changes to a subset of HTML within your component, you can add the wire:ignore directive.

The Select2 library is one of those libraries that takes over its portion of the DOM (it replaces your <select> tag with lots of custom markup).

Here is an example of using the Select2 library inside a Livewire component to demonstrate the usage of wire:ignore.

        
 1<div>
 2    <div wire:ignore> 
 3        <select class="select2" name="state">
 4            <option value="AL">Alabama</option>
 5            <option value="WY">Wyoming</option>
 6        </select>
 7 
 8        <!-- Select2 will insert its DOM here. -->
 9    </div>
10</div>
11 
12@push('scripts')
13<script>
14    $(document).ready(function() {
15        $('.select2').select2();
16    });
17</script>
18@endpush    

Communicating Between Livewire and JavaScript

Every Livewire component loaded on a browser page has both a unique id, and a corresponding JavaScript object.

You can retrieve this JavaScript object with the following syntax: let component = window.livewire.find('some-component-id')

Now that you have the component object, you can actually interact with it programaticaly from JavaScript.

For example, given the following Livewire component:

            
 1use Livewire\Component;
 2 
 3class CreatePost extends Component
 4{
 5    public $title = '';
 6 
 7    public function create()
 8    {
 9        Post::create(['title' => $this->title]);
10    }
11 
12    public function render()
13    {
14        return view('livewire.create-post');
15    }
16}        

            
1<form wire:submit.prevent="create">
2    <input wire:model="title" type="text">
3 
4    <button>Create Post</button>
5</form>        

If you happened to know the unique component ID assigned to this component when it was loaded in the browser, you could run the following in the DevTools (or from any JavaScript on the page):

        
 1<script>
 2    let component = window.livewire.find('the-unique-component-id')
 3 
 4    var title = component.get('title')
 5    // Gets the current value of the `public $title` component property.
 6    // Which defaults to '', so `title` would be set to an
 7    // empty string initially.
 8 
 9    component.set('title', 'Some Title')
10    // Sets the `public $title` component property to "Some Title"
11    // You will actually see "Some Title" fill the input field
12    // on the page. To Livewire there is no difference between
13    // Calling this method and actually typing into the input field.
14 
15    component.call('create')
16    // This will call the "create" method on the component
17    // exactly as if you physically clicked the create
18    // button inside the form.
19</script>    

If you can follow, you should be able to see the potential here. This API allows you to interact with a Livewire component, programatically, from JavaScript. This pattern unlocks all sorts of potential.

You may be wondering, "But how do I get the unique component id?". Well, you can inspect the source and look at the wire:id attribute on the root element of the component. OR you can use this very handy syntax from inside your Livewire component's view:

        
1<div>
2    <input x-data @input.keydown.enter="@this.set('foo', 'bar')">
3</div>    

If you followed, Livewire has a Blade directive called @this that is an alias for window.livewire.find('...'). This directive makes it extremely easy to talk to the current Livewire component from JavaScript, particularly AlpineJS expressions.

If you were to inspect the source of the rendered page in the browser, here is what that input element would look like:

        
1<input x-data @input.keydown.enter="window.livewire.find('unique-id').set('foo', 'bar')">    

As you can see the Livewire & Alpine combo can be extremely powerful and expressive.