v1 LiVue v1 is here — server-driven reactivity for Laravel using Vue.js Get Started →

Events

Events Showcase: dispatchTo()

Send an event to one specific component type for focused communication.

How it works

This pattern uses dispatchTo() to deliver an event only to one target component name. It is useful when you want direct communication between specific components without broadcasting globally.

Source component

Events sent: 0

$

Calls $this->dispatchTo('event-target-cart-demo', 'cart-item-added', payload).

Target component

0 items • $0

Cart is empty. Add a product from the source component.

Listens via $listeners['cart-item-added'] = 'onCartItemAdded'.

app/LiVue/EventTargetSourceDemo.php
public function addToCart(string $productId): void
{
    $this->dispatchTo(
        'event-target-cart-demo',
        'cart-item-added',
        ['id' => $productId]
    );
}
app/LiVue/EventTargetCartDemo.php
protected array $listeners = [
    'cart-item-added' => 'onCartItemAdded',
];

public function onCartItemAdded(array $payload = []): void
{
    // update cart totals from payload
}