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

Declaring Properties

Any public property on your component becomes reactive state that's automatically synced between server and client.

class UserForm extends Component
{
    public string $name = '';
    public string $email = '';
    public int $age = 0;
    public bool $active = true;
    public array $tags = [];
}

Supported Types

Type	Example	Notes
string, int, float, bool	`public int $count = 0;`	Native PHP types
array	`public array $items = [];`	Associative or indexed
Eloquent Model	`public User $user;`	Auto-serialized by ID
Collection	`public Collection $users;`	Eloquent collections
Carbon	`public Carbon $date;`	Date/time handling
Enum	`public Status $status;`	PHP 8.1+ enums

Using Properties in Templates

Display

<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>

Two-way binding

<input v-model="name" />
<input v-model.number="age" />

Initial Values

Pass initial values when rendering the component:

@livue('user-form', ['name' => 'John', 'email' => 'john@example.com'])


<livue:user-form name="John" email="john@example.com" />

Property Attributes

#[Guarded]

Prevent the property from being modified by the client.

#[Guarded]
public int $userId;

#[Url]

Sync the property with the URL query string.

#[Url]
public string $search = '';

#[Session]

Persist the property value in the session.

#[Session]
public string $theme = 'dark';

#[Reactive]

Sync the property between parent and child components.

#[Reactive]
public string $selected;