Store Showcase: PHP Bridge

Stores declared in PHP and consumed in @script with frontend/backend sync.

How it works

In this pattern, stores are declared from PHP and hydrated into Pinia on the client. You can update data from frontend, call backend actions, and synchronize with livue.sync().

JavaScript + store docs Rendering docs

PHP state (component)

Pinia component store

PHP state (global bridge)

100

Pinia global store

App global store

Component scope

Global scope

Stores are declared in PHP with two entry points: useStore() for component scope and LiVue::createStore() for global scope. In @script retrieve them with useStore(name) / livue.useGlobalStore(name). Frontend mutations are local until you call livue.sync() or invoke a PHP action.

app/Providers/AppServiceProvider.php

public function boot(): void
{
    LiVue::createStore('demo-global-counter', [
        'state' => [
            'count' => 100,
        ],
        'bridge' => [
            'count' => 'globalCount',
        ],
    ]);
}

app/LiVue/StorePatternDemo.php

protected function defineStores(): array
{
    return [
        'demo-counter' => [
            'state' => [
                'count' => $this->serverCount,
            ],
            'bridge' => [
                'count' => 'serverCount',
            ],
        ],
    ];
}

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

@script
const componentStore = useStore('demo-counter');
const globalStore = livue.useGlobalStore('demo-global-counter');

componentStore.count++;
globalStore.count++;

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