@novicell/offline-notification

nc-offline-notification

nc-offline-notification is a small component identifier for the Nuxt.js to inform the user when the app is offline.

Installation

Use the package manager npm to install component.

npm i @novicell/offline-notification

Usage

1. Create a plugin file inside /plugins. For example 'offline-notification.js'

import Vue from 'vue'
import offlineNotification from '@novicell/offline-notification'

Vue.use(offlineNotification);

2. Register plugin in 'nuxt.config.js' under 'plugins'

  plugins: [
    '~/plugins/offline-notification'
  ],

3. Display component

  <nc-offline-notification v-if="$nuxt.isOffline"></nc-offline-notification>

Add CSS modification

The aim of this component is to be customizable in order to be easily suited for different projects.

Customizable CSS variables:

:root {
  --offlineNotificationbackgroundColor: #1f2021;
  --offlineNotificationTextColor: #f2f4f5;
  --offlineNotificationFont: sans-serif;
  --offlineNotificationFontSize: .8em;
}