Navigator.onLine

Navigator.onLine (opens new window) reacts to the browser online state.

State

The useOnline function exposes the following reactive state:

import { useOnline } from "vue-composable";

const { supported, online } = useOnline();

State	Type	Description
supported	Boolean	Returns true if the browser has navigator.onLine (opens new window)
online	Ref(Boolean)	browser online

Signature	Description
remove	Manually removes the event listener

Example

Is Online?

Online: false

Supported: false

To test open dev tools and set your browser to offline (Network tab)

Code

<template>
  <div>
    <h1>Is Online?</h1>

    <h3>
      Online: <b :class="{ green: online, red: !online }">{{ online }}</b>
    </h3>
    <h4>
      Supported: <b>{{ supported }}</b>
    </h4>

    <p>To test open dev tools and set your browser to offline (Network tab)</p>
  </div>
</template>

<script>
import { useOnline } from "vue-composable";
export default {
  setup() {
    return useOnline();
  }
};
</script>
<style>
.red {
  color: red;
}
.green {
  color: green;
}
</style>