Properties

Every public property of a component is part of its state. The server renders the first page with it, and the browser then keeps it. Your methods change it, most of them in the browser and the #[Server] ones on the server. There is nothing to wire up. You declare a property and use it in the view.

The component

The counter above has two properties. increment() changes $count in the browser, without a request. Its #[Validate] rule is checked on the server before save() runs, so a count sent from outside the page can't be negative or huge. $savedAt is marked #[Locked], so the browser shows it but only save() on the server can set it. Open Compiled to see what the browser runs.

<?php

namespace App\Nitro\Components;

use Nitro\Attributes\Locked;
use Nitro\Attributes\Server;
use Nitro\Attributes\Validate;
use Nitro\Component;

class Counter extends Component
{
    #[Validate('integer|min:0|max:1000')]
    public int $count = 0;

    #[Locked]
    public string $savedAt = '';

    public function mount(): void
    {
        $this->count = session('counter.count', 0);
        $this->savedAt = session('counter.saved_at', '');
    }

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

    #[Server]
    public function save(): void
    {
        $this->savedAt = now()->format('H:i:s');

        // This demo keeps the count in the session. Your app would save it to the database.
        session(['counter.count' => $this->count, 'counter.saved_at' => $this->savedAt]);
    }
}

<div class="flex flex-wrap items-center gap-3">
    <button nitro:click="increment" class="rounded-lg bg-slate-900 px-3.5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">
        Count: {{ $count }}
    </button>
    <button nitro:click="save" nitro:loading.attr="disabled" class="rounded-lg px-3.5 py-2 text-sm font-semibold text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50 disabled:opacity-50 dark:text-slate-200 dark:ring-white/15 dark:hover:bg-white/5">
        Save on the server
    </button>
    <span class="text-sm text-slate-500">{{ $savedAt === '' ? 'Not saved yet' : 'Saved at '.$savedAt.'. Reload the page and it stays.' }}</span>
    @error('count')
        <span class="text-sm text-red-600 dark:text-red-400">{{ $message }}</span>
    @enderror
</div>

Property types

A property can hold null, a bool, an int, a float, a string, an array, a backed enum, an Eloquent model or collection, or an upload. A typed property always keeps its type. If the browser sends a value of another type, the server refuses it rather than converting it.

Model properties

Nitro reads a model property again from the database on each server call:

public ?Post $post = null;

public function mount(Post $post): void
{
    $this->post = $post;
}

• A collection keeps its order, keeps each model as its own class, and leaves out rows that have been deleted since.
• If a single model's row has been deleted, a nullable property (public ?Post $post) becomes null, so the component can tell and the view can show it. A property that isn't nullable answers with a 404.

To read and change arrays and models in your views and methods, and to choose between them, see Arrays and models.

Property attributes

You can mark a property with these attributes to change how it behaves:

Locking a property

The browser can read a property marked #[Locked], but only the server can change it, in mount() or in a #[Server] method. Because the state is signed, the server refuses a changed value.

class Wallet extends Component
{
    public int $amount = 0;

    #[Locked]
    public int $balance = 100;

    #[Server]
    public function withdraw(): void
    {
        $this->balance -= $this->amount;
    }
}

Keeping a property in the query string

#[Url] keeps a property in the query string, so a search or a page number survives a reload and can be shared:

#[Url]
public string $search = '';

#[Url(as: 'p', history: true)]
public int $page = 1;

Validating properties

The browser can set any property that isn't #[Locked] to any value of its type. Anyone can send a request without using the page, so $quantity could arrive as -500. Before a #[Server] method runs, the server checks the type of what changed, and its #[Validate] rules. If a rule fails, the method doesn't run, and the messages appear in $errors.

#[Validate('integer|min:1|max:10', as: 'quantity')]
public int $quantity = 1;

#[Server]
public function checkout(): void
{
    // $quantity is between 1 and 10 here
}

Next steps