v-offline
Show content or modify elements when the device goes offline.
Basic Usage
By default, elements with v-offline are hidden when online and shown when offline.
<!-- Show message when offline -->
<div v-offline class="bg-yellow-100 p-4 rounded">
You are currently offline. Changes will sync when reconnected.
</div>Modifiers
.class - Add CSS Classes
Add classes to an element when offline.
<!-- Add red background when offline -->
<div v-offline.class="'bg-red-200 border-red-400'">
Status indicator
</div>
<!-- Remove class when offline -->
<div v-offline.class.remove="'bg-green-500'">
Online indicator
</div>.attr - Add HTML Attributes
Add attributes like disabled when offline.
<!-- Disable button when offline -->
<button v-offline.attr="'disabled'">
Save
</button>Full Examples
<!-- Offline banner at top of page -->
<div v-offline
class="fixed top-0 inset-x-0 bg-yellow-500 text-center py-2 z-50">
No internet connection
</div>
<!-- Form that disables all inputs when offline -->
<form v-offline.class="'opacity-50 pointer-events-none'">
<input v-model="name">
<button v-offline.attr="'disabled'">Submit</button>
</form>
<!-- Status dot that changes color -->
<span class="w-3 h-3 rounded-full bg-green-500"
v-offline.class.remove="'bg-green-500'"
v-offline.class="'bg-red-500'">
</span>How It Works
The directive uses the browser's navigator.onLine API and listens to online / offline events for real-time updates.
Note: navigator.onLine only detects if there's a network connection. It doesn't guarantee the connection can actually reach your server.