Wire:offline not displaying when browser goes offline

#1

I’m testing wire:offline but I can’t make it trigger to disabel the button or show the offline message.

I’m testing it on valet locally in Firefox Developer Edition.

I tested it with two code snippets:

<button wire:offline.attr="disabled" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Test Button</button>

and

<div wire:offline>
<span style="color:red">No Internet Connection <i class="fas fa-plug" style="-webkit-transform:rotate(90deg); transform:rotate(90deg);"></i></span>
</div>

and then pulling the lan cable to disable the internet connection.

Thanks in advance.

#3

Maybe this will help someone else. I hadn’t created a component. For some reason I expected this would work adding it directly to my view template. Inside a livewire component it works as expected.

#4

I am facing the same issue i created a new component
php artisan livewire:make offline

inside offline blade view

<div wire:offline class="px-5 py-3 bg-red-400 text-white rounded-lg w-full">

    Please check your internet connection.

</div>

but it is not showing when disconnecting lan and stoping xampp

any help would be appreciated

#5

When the your ethernet connected gone this will work