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
• Using $nuxt helper
• Writing Code
• Results

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.

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