Detect Online/Offline Status with VueUse

Want your app to adapt to network changes? Track connectivity easily with useNetwork.

How It Works:

useNetwork provides a reactive isOnline boolean that updates with your network status.

Code Example:

<script setup>
import { useNetwork } from '@vueuse/core'

const { isOnline } = useNetwork()
</script>

<template>
  <p v-if="isOnline">? You are online</p>
  <p v-else>? You are offline</p>
</template>

Why Use It:

• Inform users of connectivity loss.
• Gracefully handle offline scenarios in PWAs or apps with autosave.