Neolithic Prancing Minotaurs

    v-offline
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    V-Offline ⚡️

    GitHub Workflow Status GitHub Workflow Status GitHub release (latest SemVer) npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo LGTM Alerts LGTM Grade GitHub contributors FOSSA

    eslint prettier rollup vue typescript

    Features

    • Detect offline & online events for your vue app.
    • Built from scratch usign Vue 2 & Composition API with TypeScript
    • For Vue 2.x version – npm i v-offline@2
    • For Vue 3.x version – npm i v-offline@3

    Table of Contents

    Demo

    Edit v-offline demo

    Requirements

    Installation

    npm install --save v-offline
    npm install --save-dev @vue/composition-api

    CDN: UNPKG | jsDelivr (available as window.VOffline)

    Build Setup

    # install dependencies
    $ npm ci
    
    # package the library
    $ npm run build

    Usage

    Globally

    As a component

    Vue.component('VOffline', require('v-offline'));

    As a plugin

    import Vue from 'vue';
    import VOffline from 'v-offline';
    
    Vue.use(VOffline);

    Locally

    import { VOffline } from 'v-offline';

    Example

    Locally imported as a component
    <v-offline @detected-condition="amIOnline">
      <template v-if="online"> ( Online: {{ onLine }} ) </template>
      <template v-if="offline"> ( Online: {{ onLine }} ) </template>
    </v-offline>
    import { VOffline } from 'v-offline';
    
    Vue.component('example-component', {
      components: {
        VOffline
      },
      data() {
        return {
          onLine: true,
        };
      },
      methods: {
        amIOnline(e) {
          this.onLine = e;
        },
      },
    });
    .offline {
      background-color: #fc9842;
      background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
    }
    .online {
      background-color: #00b712;
      background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
    }

    API

    Props

    Name Type Required? Default Description
    online-class String No '' Styling the div which you want to give if you're online.
    offline-class String No '' Styling the div which you want to give if you're offline.
    ping-url String No https://google.com Pinging any url to double check if you're online or not.

    Events

    Name Returns Description
    @detected-condition String Emits a boolean value

    Built with

    Contributing

    1. Fork it ( https://github.com/vinayakkulkarni/v-offline/fork )
    2. Create your feature branch (git checkout -b feat/new-feature)
    3. Commit your changes (git commit -Sam 'feat: add feature')
    4. Push to the branch (git push origin feat/new-feature)
    5. Create a new Pull Request

    Note:

    1. Please contribute using Github Flow
    2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
    3. PS. Ensure your commits are signed. Read why

    Author

    v-offline © Vinayak, Released under the MIT License.
    Authored and maintained by Vinayak Kulkarni with help from contributors (list).

    vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

    License

    FOSSA Status

    Install

    npm i v-offline

    DownloadsWeekly Downloads

    1,119

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    71.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar