Components

Basic Structure

A LiVue component consists of two parts: a PHP class and a Blade template.

<?php

namespace App\LiVue;

use LiVue\Component;

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

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

<div>
    <p>Count: {{ count }}</p>

    <button v-click:increment>
        Add
    </button>
</div>

Rendering Components

There are multiple ways to render a LiVue component in your views.

@livue('counter')


@livue('counter', ['count' => 10])

<livue:counter />


<livue:counter :count="10" />

use LiVue\Facades\LiVue;

LiVue::route('/counter', Counter::class);

Properties

Public properties on your component become reactive state, automatically synced between server and client.

class UserProfile extends Component
{
    // Primitive types
    public string $name = '';
    public int $age = 0;
    public bool $active = true;

    // Arrays
    public array $items = [];

    // Eloquent models (auto-serialized)
    public User $user;

    // Collections
    public Collection $users;

    // Carbon dates
    public Carbon $publishedAt;
}

Actions

Public methods become actions that can be called from the template.

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

public function delete(int $id)
{
    Item::destroy($id);
}

<button v-click:save>
    Save
</button>


<button v-click:delete="{{ item.id }}">
    Delete
</button>

Quick Reference