Display a Toast notification in Nuxt/Vue app whenever the user goes offline or online.

Offline Toast Notification in Nuxt/Vue App

Ravgeet Dhillon

Ravgeet Dhillon

Written on Jan 18, 2021 in Development

⏱ 5 min read

Blog banner for Offline Toast Notification in Nuxt/Vue App

You must have often seen in apps telling you - “You are offline. Check your network status.”. It is not only convenient to do so but adds to a great UX.

In this tutorial, you’ll look at how can you display a toast notification in a Nuxt/Vue app whenever the user goes offline or online. This will also help you to understand how to use computed and watch properties together.

Contents

Prerequisites

Before getting started, make sure that you have correctly setup Nuxt and BootstrapVue.

Using $nuxt helper

Nuxt provides a great way to access its helper class, $nuxt. To get the current network connection status, you can do two things:

<template>
  <p>$nuxt.isOffline</p>
  <p>$nuxt.isOnline</p>
</template>

<script>
export default {
  created() {
    console.log(this.$nuxt.isOffline)
    console.log(this.$nuxt.isOnline)
  }
}
</script>

Yes, it is as simple as that.

Now in BootstrapVue, you can create toasts on-demand using this.$bvToast.toast() function. So you can implement the notification behavior using computed and watch properties provided by Vue.

Writing Code

The best place to add the following piece of code is in your layouts/default.vue because doing so can help you to implement a universal kind of notification behavior.

<template>
  <Nuxt />
</template>

<script>
export default {
  computed: {
    connectionStatus() {
      return this.$nuxt.isOffline
    },
  },
  watch: {
    connectionStatus(offline) {
      if (offline) {

        // hide the online toast if it exists
        this.$bvToast.hide('online')

        // create a new toast for offline notification
        // that doesn't hide on its own
        this.$bvToast.toast('You are now offline', {
          id: 'offline',
          toaster: 'b-toaster-bottom-right',
          noCloseButton: true,
          solid: true,
          noAutoHide: true,
          variant: 'danger',
        })
      } else {

        // hide the offline toast if it exists
        this.$bvToast.hide('offline')

        // create a new toast for online notification
        // that auto hides after a given time
        this.$bvToast.toast('You are now online', {
          id: 'online',
          toaster: 'b-toaster-bottom-right',
          noCloseButton: true,
          solid: true,
          autoHideDelay: 5000,
          variant: 'success',
        })
      }
    },
  },
}
</script>

In the above code, you first create a computed property, connectionStatus. In connectionStatus, you return the value of this.$nuxt.isOffline. Now in Vue, whenever a property, a computed is dependent upon changes, the computed property also changes. So whenever this.$nuxt.isOffline changes, connectionStatus gets a new value.

Next, you watch the changes in the value of connectionStatus and perform actions based on its new value, offline. In this case, you check whether the changed value of connectionStatus is true, you display your toast notification using BootstrapVue functions.

Results

To test the functionality of your app, go to your browser and check whether the above code works or not. Open the Network tab in Developer Tools, and toggle the network connection status.

Hurray! Toast notifications are working perfectly fine.

Toast notification when user is offline in Nuxt/Vue

So using the combined magic of computed and watch properties, you can create outstanding workflows and take your Nuxt/Vue app to next level.

📫

Loved this post? Join our Newsletter.

We write about React, Vue, Flutter, Strapi, Python and Automation. We don't spam.

Please add a valid email.
By clicking submit button, you agree to our privacy policy.
Thanks for subscribing to our newsletter.
There was some problem while registering your newsletter subscription. Please try again after some time or notify the owners at info@ravsam.in

ABOUT AUTHOR

Ravgeet Dhillon

Ravgeet is a Co-Founder and Developer at RavSam. He helps startups, businesses, open-source organizations with Digital Product Development and Technical Content Writing. He is a fan of Jamstack and likes to work with React, Vue, Flutter, Strapi, Node, Laravel and Python. He loves to play outdoor sports and cycles every day.

TAGGED WITH

Got a project or partnership in mind?

Let's Talk

Contact Us ->