@novicell/offline-notification

Offline notification component for nuxt setup

Usage no npm install needed!

<script type="module">
  import novicellOfflineNotification from 'https://cdn.skypack.dev/@novicell/offline-notification';
</script>

README

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);
  1. Register plugin in 'nuxt.config.js' under 'plugins'
  plugins: [
    '~/plugins/offline-notification'
  ],
  1. 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;
}