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

Basic Usage

Properties marked with #[Guarded] cannot be modified by the client, even via v-model or JavaScript.

use LiVue\Attributes\Guarded;

class UserProfile extends Component
{
    #[Guarded]
    public int $userId;

    #[Guarded]
    public string $role;

    public string $name; // This can be modified
}

Why Use Guarded?

By default, LiVue allows v-model to sync any public property. This is convenient but potentially insecure for sensitive data.

Without #[Guarded]

A malicious user could modify $userId via browser devtools to access other users' data.

With #[Guarded]

The server rejects any client-side modifications to $userId.

What Should Be Guarded?

class InvoiceEditor extends Component
{
    // GUARD: User shouldn't change which invoice they're editing
    #[Guarded]
    public int $invoiceId;

    // GUARD: Price is calculated server-side
    #[Guarded]
    public float $total;

    // GUARD: Authorization data
    #[Guarded]
    public bool $canEdit;

    // OK: User can modify these
    public string $notes = '';
    public string $status = 'draft';
}

Server-Side Modification

Guarded only prevents client-side modification. Your PHP code can still change these values.

#[Guarded]
public float $total = 0;

public function addItem(int $productId)
{
    $this->items[] = Product::find($productId);

    // Server can update guarded properties
    $this->total = $this->calculateTotal();
}