nuxt-offline-alert

Preview

Install

npm install nuxt-offline-alert

Usage

The most common use case is to register the component globally in nuxt is creating a plugin for it.

// in your nuxt-offline-alert.js or similar file
import OfflineAlert from "nuxt-offline-alert";
import Vue from "vue";

Vue.use(OfflineAlert);

on nuxt.config.js

{
    ...
    plugins: [
        { src: 'plugins/nuxt-offline-alert.js', ssr: false }
    ]
    ...
}

Alternatively you can do this to register the components:

// HelloWorld.vue
import OfflineAlert from "nuxt-offline-alert";

export default {
  name: 'HelloWorld',
  components: {
    OfflineAlert
  }
}

On your page you can now use html like this:

// see props if you want to change online and offline messages
<client-only>
    <offline-alert/>
</client-only>

CSS

You don't like the default styling of the component ...? Feel free to customize your component for example:

.offline-alert{
    background: grey // changing the background
}
.offline-alert-indicator--offline {
    background-color: orange; // changing offline indicator color
}
.offline-alert-indicator--online {
    background-color: blue; // changing online indicator color
}

Props

|Prop|Type|Required|Default|Description |-|-|-|-|-| |onlineMessage|String|false|Back online!|Message to show when online |offlineMessage|String|false|You're offline!|Message to show when offline