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

Defining Actions

Any public method on your component can be called from the client.

class TodoList extends Component
{
    public array $todos = [];
    public string $newTodo = '';

    public function add()
    {
        $this->todos[] = $this->newTodo;
        $this->newTodo = '';
    }

    public function remove(int $index)
    {
        unset($this->todos[$index]);
        $this->todos = array_values($this->todos);
    }
}

Calling Actions

Use v-click to call actions on click events.

<!-- Simple action -->
<button v-click:add>Add Todo</button>

<!-- With parameter -->
<button v-click:remove="{{ index }}">Remove</button>

<!-- Multiple parameters -->
<button v-click:update="[{{ id }}, {{ status }}]">Update</button>

v-click Modifiers

Modifier	Example	Description
.prevent	`v-click:save.prevent`	Prevent default event
.stop	`v-click:toggle.stop`	Stop event propagation
.once	`v-click:submit.once`	Execute only once
.debounce	`v-click:search.debounce.300ms`	Debounce the action
.throttle	`v-click:load.throttle.500ms`	Throttle the action
.outside	`v-click:close.outside`	Trigger on click outside

Action Attributes

#[Confirm]

Require user confirmation before executing.

#[Confirm('Are you sure you want to delete this?')]
public function delete(int $id) { ... }

#[Json]

Return JSON without re-rendering the template.

#[Json]
public function search(string $query): array
{
    return User::search($query)->get();
}

#[Isolate]

Exclude from request batching (execute immediately).

#[Isolate]
public function criticalAction() { ... }

Redirects

Redirect users after an action completes.

public function save()
{
    $this->user->save();

    // Full page redirect
    return $this->redirect('/users');

    // SPA-style navigation (no full reload)
    return $this->redirect('/users', navigate: true);
}