https://github.com/bioudi/nuxt-offline-alert

🔌 Simple vue component for connection lost using nuxt helper.
https://github.com/bioudi/nuxt-offline-alert

nuxt nuxtjs offline online vue vuejs vuejs2

Last synced: 19 days ago
JSON representation

🔌 Simple vue component for connection lost using nuxt helper.

• Host: GitHub
• URL: https://github.com/bioudi/nuxt-offline-alert
• Owner: bioudi
• Created: 2019-11-22T20:30:50.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T09:52:51.000Z (about 2 years ago)
• Last Synced: 2024-04-25T04:44:57.226Z (8 months ago)
• Topics: nuxt, nuxtjs, offline, online, vue, vuejs, vuejs2
• Language: Vue
• Homepage:
• Size: 2.97 MB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nuxt-offline-alert

[![npm](https://img.shields.io/npm/v/nuxt-offline-alert.svg?style=for-the-badge)](https://www.npmjs.com/package/nuxt-offline-alert)

[![npm](https://img.shields.io/npm/dt/nuxt-offline-alert.svg?style=for-the-badge)](https://www.npmjs.com/package/nuxt-offline-alert)

## Preview

![](preview.gif)

## 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.

```js

// 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

```js

{

    ...

    plugins: [

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

    ]

    ...

}

```

Alternatively you can do this to register the components:

```js

// HelloWorld.vue

import OfflineAlert from "nuxt-offline-alert";

export default {

  name: 'HelloWorld',

  components: {

    OfflineAlert

  }

}

```

On your page you can now use html like this:

```html

// see props if you want to change online and offline messages

    

```

## CSS

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

```css

.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