Debbie O'Brien

Posted on Apr 20, 2020 • Updated on Jun 13, 2020 • Originally published at debbie.codes

Show a message when your user is offline with $nuxt.isOffline

#nuxt #vue #offline

Did you know that $nuxt.isOffline can be used to show your users content based on if they are online or not.

By using a v-if we can show content based on if a user is offline or online.

In your layouts/default.vue

<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <nuxt/>
  </div>
</template>

Just by adding that line of code to your app and disabling the internet, either in dev tools or by turning off your internet connection, the message "You are offline will appear".

This won't work on page refresh and it only works when the page has loaded.

So what is it useful for?
You could have a cool toast like message that pops out when the user loses internet and say something like "ooopps looks like you just lost your internet connection". This could very useful on payment pages or when filling out large forms for example. You still see the content of the page but are unaware that you have lost the connection.

Then you could have the $nuxt.isOnline to show a message that says "yeah you are back online".

<template>
  <div>
    <div v-if="$nuxt.isOnline">Yeah you are online</div>
    <nuxt/>
  </div>
</template>

I am sure there are many other use cases for this and would love to hear if you have any suggestions or if anyone is actually using it and if so what for.

If you are not using it then go ahead and give it a try. In this example I have added it to the layout but you can add it to a page or even a component. Have fun.