Vue Js Detect Internet Connection: Vue.js has the ability to detect whether or not an internet connection is available Vue.js uses the navigator.onLine property to detect an internet connection and responds accordingly, allowing developers to create features that adapt to a user’s online status, such as providing different views when they are connected or disconnected  This means that when a browser is connected to the internet, the onLine property returns true, otherwise it returns false We will describe how to use this property to check the internet connection in vuejs in this tutorial.

How to Check Internet Connection Status in Vue Js

The navigator.onLine property in Vue.js can be used to determine the internet connection. The browser’s online or offline status is indicated by the boolean value returned by this property.

Vue Js navigator.onLine property Example

<div id="app">
   <p v-if="checkConnection">You are online</p>
   <p v-else>You are offline</p>
</div>
<script type="module">
import { createApp } from "vue";
   createApp({
          data() {
            return {
              checkConnection: navigator.onLine,
            };
          },
         }).mount("#app");
</script>

If the user is online or offline, a message indicating that will be displayed. It should be noted that navigator.onLine only shows whether the browser is online or offline and does not always reflect the status of the actual internet connection. For instance, navigator.onLine will still return true even if the router is not online but the user’s device is connected to a WiFi network.

Output of above example