Store Showcase: Frontend Only

A store defined directly in @script for pure frontend interaction.

How it works

This pattern defines the store directly in @script. It's useful for frontend-only UX state and fast prototyping while still allowing optional sync back to PHP.

JavaScript store docs Rendering docs

PHP state mirror

Frontend store

Backend

Frontend

This example defines the store on the client via store(name, definition). The mirror to $localCount is optional and shown only to demonstrate livue.sync().

app/LiVue/StoreFrontendDemo.php

class StoreFrontendDemo extends Component
{
    public int $localCount = 10;

    public function incrementServer(): void
    {
        $this->localCount++;
    }

    public function resetServer(): void
    {
        $this->localCount = 10;
    }
}

resources/views/livue/store-frontend-demo.blade.php

@script
const frontendStore = store('frontend-only-counter', {
    state: () => ({
        count: localCount.value,
    }),
    actions: {
        increment() { this.count++; },
        reset() { this.count = 0; },
    },
});

const syncToBackend = () => livue.sync();
@endscript