v1 LiVue v1 is here — server-driven reactivity for Laravel using Vue.js Get Started →

Features

Feature Showcase: Loading States

Use loading directives to show progress and prevent duplicate actions.

How it works

v-loading reacts to request state: show/hide blocks, toggle classes, and disable controls for specific actions.

Count

0

Status

Ready

This panel dims while any request is running. CamelCase actions are called with v-click="slowIncrement" to preserve method case.

Increment in progress...

Reset in progress...

app/LiVue/LoadingStatesDemo.php
public function slowIncrement(): void
{
    usleep(900000);
    $this->count++;
}
resources/views/livue/loading-states-demo.blade.php
<button
    v-click="slowIncrement"
    :disabled="livue.isLoading('slowIncrement')">
    +1 Slow Increment
</button>

<p v-loading="'slowIncrement'">
    Increment in progress...
</p>