2.0.8 • Published 5 years ago

vue-offline v2.0.8

Weekly downloads
5,569
License
MIT
Repository
github
Last release
5 years ago

Vue Offline

This library allows you to enhance offline capabilities of your Vue.js application. It's especially useful when you're building offline-first Progressive Web Apps or just want to inform your users that they lost internet connection.

TL;DR Adds isOnline isOffline data properties, online, offline events via global mixin and enables offline storage via Vue.$offlineStorage based on Local Storage

Initially made for Vue Storefront

Installation

To install this package as a plugin just type:

npm install vue-offline --save

and add it into your application with

import VueOffline from 'vue-offline'

Vue.use(VueOffline)

Capabilities

This plugin contains two features:

VueOfflineMixin

Global mixin that'll add following properties to every component in your application:

  • isOnline & isOffline data properties
<template>
    <p v-if="isOnline">This part will be visible only if user is online</p>
    <p v-if="isOffline">This part will be visible only if user is offline</p>
</template>
export default {
    name: 'MyComponent',
    computed: {
        networkStatus () {
            return this.isOnline ? 'My network is fine' : 'I am offline'
        }
    }
}
  • online and offline events in every component
export default {
    name: 'MyComponent',
    mounted () {
        this.$on('offline' () => {
            alert('You are offline! The website will not work')
        })
    }
}

Additional configuration

By default VueOfflineMixin is injected into every component which may be a cause of potential performance problems. You can disable this behavior by setting plugin option mixin to false.

Vue.use(VueOffline, {
    mixin: false
})

You can still make use of VueOfflineMixin by injecting it directly into your components:

import { VueOfflineMixin } from 'vue-offline'

export default {
    name: 'MyComponent',
    mixins: [VueofflineMixin],
    computed: {
        networkStatus () {
            return this.isOnline ? 'My network is fine' : 'I am offline'
        }
    },
    mounted () {
        this.$on('offline' () => {
            alert('You are offline! The website will not work')
        })
    }
}

VueOfflineStorage

Offline storage that uses local storage to persist data for offline usage and caching. It's a perfect choice for offline-first PWA. You can use it as a fallback for failed network requests or a local cache.

The storage object has following properties:

  • set(key, value) - puts (or updates if already exists) value into storage under key key.
  • get(key) - returns value stored under key key
  • keys - return array of keys existing in your offline storage

To use this storage inside your app you can either

  • use this.$offlineStorage from Vue instance property in your components:
export default {
    methods: {
        getUserData () {
            if (this.isOnline) {
                // make network request that returns 'userData' object
                this.appData = userData
                this.$offlineStorage.set('user', userData)
            } else {
                this.appData = this.$offlineStorage.get('user')
            }
        }
    }
}
  • import the VueOfflineStorage instance if you want to use it somewhere else (e.g. Vuex store)
import { VueOfflineStorage } from 'vue-offline'

const cachedData = VueOfflineStorage.get('cached-data')

Additional configuration

By default VueofflineStorage reference is included into every Vue component. You can disable this behavior by setting plugin option storage to false.

Vue.use(VueOffline, {
    storage: false
})

You can still make use of VueOfflineStorage by importing it directly into your components:

import { VueOfflineStorage } from 'vue-offline'

export default {
    name: 'MyComponent',
    methods: {
        getUserData () {
            if (this.isOnline) {
                // make network request that returns 'userData' object
                this.appData = userData
                VueOfflineStorage.set('user', userData)
            } else {
                this.appData = VueOfflineStorage.get('user')
            }
        }
    }
}
2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.204

6 years ago

1.0.203

6 years ago

1.0.202

6 years ago

1.0.201

6 years ago

1.0.200

6 years ago

1.0.111

6 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago