Live Examples

Counter

A simple counter demonstrating reactive state and server actions.

Counter.php

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

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

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

counter.blade.php

<div>
    <button v-click:decrement>-</button>
    <span>{{ count }}</span>
    <button v-click:increment>+</button>
</div>

Todo List

A todo list with drag & drop reordering. Drag the handle to reorder items.

{{ todo.text }}

No tasks yet. Add one above!

TodoList.php

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

    public function addTodo(): void { /* ... */ }
    public function toggleTodo(string $id): void { /* ... */ }
    public function removeTodo(string $id): void { /* ... */ }

    // Drag & Drop handler
    public function reorder(string $item, int $position): void
    {
        $index = array_search($item, array_column($this->todos, 'id'));
        $moved = $this->todos[$index];
        array_splice($this->todos, $index, 1);
        array_splice($this->todos, $position, 0, [$moved]);
    }
}

todo-list.blade.php

<ul v-sort="'reorder'">
    <li v-for="todo in todos"
        :key="todo.id"
        v-sort-item="todo.id">

        <span v-sort-handle>☰</span>
        <input v-sort-ignore type="checkbox" />
        {{ todo.text }}
        <button v-sort-ignore>Delete</button>
    </li>
</ul>

Contact Form

A form with validation using #[Validate] attributes. Try submitting with invalid data!

Thank you for your message!

We'll get back to you soon.

ContactForm.php

class ContactForm extends Component
{
    #[Validate('required|min:2')]
    public string $name = '';

    #[Validate('required|email')]
    public string $email = '';

    #[Validate('required|min:10')]
    public string $message = '';

    public function submit(): void
    {
        $this->validate();
        // Process data...
        $this->reset(['name', 'email', 'message']);
    }
}

contact-form.blade.php

<form v-submit="'submit'">
    <input v-model="name"
        :class="livue.errors.name ? 'border-red' : ''">
    <span v-if="livue.errors.name">
        {{ livue.errors.name[0] }}
    </span>

    <button v-loading.class="'opacity-50'">
        <span v-loading>Sending...</span>
        <span v-loading.remove>Send</span>
    </button>
</form>