v-loading
Show and hide elements based on loading state.
Basic Usage
Show elements while any AJAX request is in progress.
<!-- Show spinner during any loading -->
<div v-loading>
Loading...
</div>
<!-- Show only during specific action -->
<div v-loading="save">
Saving...
</div>Modifiers
.remove
Hide the element during loading (inverse behavior).
<button v-loading.remove>
Submit
</button>.class
Add a CSS class during loading.
<button v-loading.class="opacity-50 cursor-wait">
Submit
</button>.attr
Set an attribute during loading.
<button v-loading.attr="disabled">
Submit
</button>.delay
Delay showing the loading indicator.
<!-- Only show if loading takes longer than 200ms -->
<div v-loading.delay.200ms>
Loading...
</div>Targeting Specific Actions
<button v-click:save>
<span v-loading.remove="save">Save</span>
<span v-loading="save">Saving...</span>
</button>v-target Helper
Use v-target to automatically add data-loading attribute for Tailwind styling.
<button
v-click:save
v-target="save"
class="data-[loading]:opacity-50 data-[loading]:cursor-wait"
>
Save
</button>JavaScript API
// Check if any request is loading
if (livue.loading) { ... }
// Check if specific action is loading
if (livue.isLoading('save')) { ... }
// Get all loading targets
console.log(livue.loadingTargets);