How to Install LiVue Step by Step and Build Your First Component

LiVue lets you build reactive interfaces with PHP on the server and Vue on the client, without creating a separate API layer.

This guide is intentionally short: a few steps and you have your first working component.

1) Install the package

composer require livue/livue

2) Generate your first component

Create a Counter component:

php artisan make:livue Counter

This command generates:

• app/LiVue/Counter.php
• resources/views/livue/counter.blade.php

3) Add component logic and template

PHP class (app/LiVue/Counter.php):

<?php

namespace App\LiVue;

use LiVue\Component;

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

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

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

    protected function render(): string
    {
        return 'livue.counter';
    }
}

Blade template (resources/views/livue/counter.blade.php):

<div class="space-y-3">
    <p>Count: @{{ count }}</p>

    <div class="flex items-center gap-2">
        <button v-click="decrement">-</button>
        <button v-click="increment">+</button>
    </div>
</div>

4) Render the component in a page

In any Blade view:

@livue('counter')

Now every click calls PHP methods on the server and updates the UI reactively.

5) Run and verify

php artisan serve

Open the page where you placed @livue('counter') and verify:

• increment/decrement works
• server/client state stays in sync
• no JavaScript errors in browser console

Conclusion

That is it. In a few steps you installed LiVue, created a component, and rendered it in a real page.

If you want advanced frontend integration (manual runtime boot, HMR tuning, custom Vite setup), check the official LiVue docs.