Counter

A simple counter demonstrating reactive state and server actions.

How it works

The component state lives in PHP and the template updates through LiVue directives. Pressing buttons triggers server methods that mutate $count, then LiVue updates the DOM.

State docs Directives docs

app/LiVue/Counter.php

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

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

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

resources/views/livue/counter.blade.php

<button v-click="decrement">-</button>

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

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