https://github.com/Sopamo/vue-online

A reactive offline indicator component for vue.js
https://github.com/Sopamo/vue-online

vue vue-component vue2

Last synced: 3 months ago
JSON representation

A reactive offline indicator component for vue.js

• Host: GitHub
• URL: https://github.com/Sopamo/vue-online
• Owner: Sopamo
• License: mit
• Created: 2016-11-23T10:14:29.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-08-25T08:59:40.000Z (almost 4 years ago)
• Last Synced: 2024-03-18T17:17:51.338Z (3 months ago)
• Topics: vue, vue-component, vue2
• Language: Vue
• Size: 522 KB
• Stars: 127
• Watchers: 3
• Forks: 12
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-online - online?style=social) - reactive的在线和离线组件 (实用库)
• awesome-vue-refactor - vue-online
• awesome-github-vue - vue-online - reactive的在线和离线组件 (实用库)
• awesome-github-vue - vue-online - reactive的在线和离线组件 (实用库)
• awesome - vue-online - reactive的在线和离线组件 (实用库)
• my-awesome-stars - Sopamo/vue-online - A reactive offline indicator component for vue.js (Vue)
• awesome-github-vue - vue-online - reactive的在线和离线组件 (实用库)

README

        
# vue-online

> A reactive online/offline component for vue.js

![Vue online preview](https://raw.githubusercontent.com/Sopamo/vue-online/master/preview.gif)

# Installation

    

    npm install vue-online --save

# Usage

That's a basic example of a component which would just show the offline message if the user has no connection:

    

      


        

      

    


    

    import { OfflineIndicator } from 'vue-online'

    export default {

      name: 'app',

      components: {

        OfflineIndicator

      }

    }

    

# Advanced usage (with the reactive online variable)

You can use ConnectionStatus.online anywhere in your app, it updates dynamically as the connection of the user changes.

    

      


        Connection: onlineoffline

        

      

    


    

    import { OfflineIndicator, VueOnline } from 'vue-online'

    export default {

      name: 'app',

      computed: {

        online () {

          return VueOnline.isOnline

        }

      },

      components: {

        OfflineIndicator

      }

    }

    

# Custom offline message

To use a custom message, simply specify it on the component:

    

# Custom styling

To style the offline indicator just use the css selector div.offline-indicator:

    div.offline-indicator {

      background: red;

      color: white;

    }