What is wire:error?

Livewire makes it straightforward to notify users if they lose their internet connection. Here’s how you can implement it:

<div wire:offline>
    You are now offline. Please check your internet connection.
</div>

This simple snippet will hide the message by default and display it only when the user’s browser goes offline. Once the connection is restored, the message will disappear automatically.

Explanation:

• The wire:offline directive is attached to a <div> element.
• This element will be hidden when the user has an internet connection and will become visible when the connection is lost.

Use Case:

This can be particularly useful in applications where real-time interactions are critical, like live chat apps, or when users are filling out forms, ensuring they know their actions won’t be saved until connectivity is restored.

Additional Tips:

• You can style this message with CSS for better visibility, perhaps using a distinct background color or a large font.
• Combine this with other Livewire directives like wire:loading for a comprehensive user experience, informing users about both their connection status and ongoing actions.

 <p class="alert alert-warning" wire:offline>
    Whoops, your device has lost connection. The web page you are viewing is offline.
</p>