LiVue - Server-driven reactivity for Laravel using Vue.js

Setup

LiVue integrates with Laravel Echo for real-time broadcasting. First, set up Laravel Echo in your application.

resources/js/bootstrap.js

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
});

Listening to Events

Use attributes in your template to listen for broadcast events.

<!-- Public channel -->
<div echo:notifications,NewNotification="handleNotification">

<!-- Private channel -->
<div echo-private:user.{{ userId }},MessageReceived="handleMessage">

<!-- Presence channel -->
<div echo-presence:chat.{{ roomId }},UserTyping="handleTyping">

Handling in PHP

class NotificationList extends Component
{
    public array $notifications = [];

    public function handleNotification($event)
    {
        $this->notifications[] = $event['notification'];
    }
}

Presence Channel Events

Special events for presence channels (who's online).

<!-- When you join, get list of current users -->
<div echo-presence:chat.1,here="setUsers">

<!-- When someone joins -->
<div echo-presence:chat.1,joining="addUser">

<!-- When someone leaves -->
<div echo-presence:chat.1,leaving="removeUser">

Dynamic Channels

For dynamic channel names, use the getListeners() method.

public function getListeners(): array
{
    return [
        "echo-private:orders.{$this->orderId},OrderUpdated" => 'refreshOrder',
    ];
}

Common Use Cases

Live Chat

Real-time message delivery and typing indicators.

Notifications

Instant notification delivery without polling.

Collaborative Editing

See other users' changes in real-time.

Live Dashboards

Real-time metrics and data updates.

Broadcasting