LiVue Documentation v1

What is LiVue?

LiVue is a Laravel package that lets you build rich, reactive web interfaces without leaving PHP. It bridges the gap between server-side rendering and client-side interactivity by combining Laravel's backend strength with Vue.js on the frontend.

With LiVue, your PHP component classes hold the application state and business logic. Public properties become reactive data, and public methods become callable actions. On the client side, Vue.js takes over: it hydrates the server-rendered HTML, binds reactive state, and handles user interactions — all without you writing a single line of JavaScript.

There is no separate API to build. No REST endpoints, no JSON resources, no frontend state management boilerplate. When a user clicks a button or submits a form, LiVue automatically sends the interaction to the server, executes the appropriate PHP method, re-renders the Blade template, and swaps the updated HTML into the page. The entire round-trip is invisible to the developer.

Think of it as writing a standard Laravel application where your Blade templates happen to be fully reactive. You get server-side security, validation, and database access with the fluid, instant feel of a single-page application.

Key Features

Server-Driven State

Your PHP component's public properties become reactive state, automatically synced between server and client. Change a property in PHP and the UI updates. Bind with v-model and the server stays in sync.

Vue Directives in Blade

Use v-model, v-if, v-for, v-click and all Vue directives directly in your Blade templates. No separate .vue files needed.

Automatic AJAX

Every server call is handled for you. Multiple actions triggered in the same tick are automatically batched into a single HTTP request. No manual fetch calls, no API routes to define.

Secure by Default

State integrity is verified with HMAC checksums on every request. CSRF protection is automatic. Methods are guarded so only explicitly public methods can be called from the client.

SPA Navigation

Navigate between pages without full reloads. LiVue intercepts link clicks, fetches the new page via AJAX, and swaps the content seamlessly — with support for prefetching and persistent elements.

Islands Architecture

Mark any component as an island to give it its own independent Vue application. Islands are fully isolated — perfect for widgets, third-party integrations, or performance-critical sections.

How It Works

LiVue follows a straightforward cycle: the server renders HTML, Vue makes it interactive, and user actions round-trip back to the server automatically.

1
Define a PHP Component
Create a class that extends Component. Its public properties become the reactive state, and its public methods become the actions your frontend can call.
2
Write a Blade Template
Combine standard Blade syntax with Vue directives. Use {{}} for reactive output, v-model for two-way binding, and v-click to call server methods.
3
Server Renders Initial HTML
On the first request, Laravel renders the Blade template on the server, producing complete HTML with the component's state embedded as data attributes.
4
Vue Hydrates the DOM
LiVue's JavaScript runtime finds each component on the page, reads the embedded snapshot, and mounts a Vue application. The static HTML becomes a fully reactive interface.
5
Interactions Sync Automatically
When the user triggers an action, LiVue sends the current state diff and the method name to the server via AJAX. The server validates the checksum, runs the method, re-renders the template, and sends back the updated HTML. Vue swaps in the new template — no DOM morphing required.

Quick Example

Here is a simple counter component. The PHP class defines the state and an action; the Blade template renders the UI with Vue directives.

app/LiVue/Counter.php

namespace App\LiVue;

use LiVue\Component;

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

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

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

resources/views/livue/counter.blade.php

<div class="flex items-center gap-4">
    <button v-click="decrement"> - </button>

    <span>@{{ count }}</span>

    <button v-click="increment"> + </button>
</div>

That's it. No JavaScript to write, no API route to register, no state store to configure. The $count property is reactive on the client. Clicking the buttons calls the PHP methods on the server and the UI updates automatically.

Introduction