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

What is LiVue?

LiVue lets you build reactive, dynamic interfaces using the power of Laravel on the server and Vue.js on the client. Instead of building separate API endpoints and managing complex state on the frontend, you write PHP components that automatically sync with Vue.

If you're familiar with Livewire, LiVue follows the same philosophy but uses Vue.js instead of Alpine.js. This gives you access to Vue's powerful ecosystem while keeping your business logic on the server.

Key Features

Server-Driven State

Your PHP component's public properties become reactive state, automatically synced between server and client.

Vue Directives in Blade

Use v-model, v-if, v-for, v-click and all Vue directives directly in your Blade templates.

Automatic AJAX

Actions are automatically batched and sent to the server. No manual fetch calls or API routes needed.

Secure by Default

HMAC checksums, CSRF protection, and automatic method guards keep your application secure.

How It Works

1
Define a PHP Component
Create a class with public properties (state) and public methods (actions).
2
Write a Blade Template
Use Vue directives for reactivity and Blade for server-side rendering.
3
Server Renders Initial HTML
The component renders on the server, sending HTML with embedded state.
4
Vue Hydrates the DOM
Vue mounts on the server-rendered HTML, making it reactive.
5
Interactions Sync Automatically
User actions trigger AJAX calls that update state and re-render the template.

Quick Example

Counter.php

class Counter extends Component
{
    public int $count = 0;

    public function increment()
    {
        $this->count++;
    }
}

counter.blade.php

<div>
    <p>Count: {{ count }}</p>
    <button v-click:increment>
        Add
    </button>
</div>

Introduction