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
Vue
Capabilities
This plugin contains two features:
VueOfflineMixin
Global mixin that'll add following properties to every component in your application:
isOnline
&isOffline
data properties
This part will be visible only if user is online This part will be visible only if user is offline
name: 'MyComponent' computed: { return thisisOnline ? 'My network is fine' : 'I am offline' }
online
andoffline
events in every component
name: 'MyComponent' { this }
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
You can still make use of VueOfflineMixin
by injecting it directly into your components:
name: 'MyComponent' mixins: VueofflineMixin computed: { return thisisOnline ? 'My network is fine' : 'I am offline' } { this }
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 keykey
.get(key)
- returns value stored under keykey
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:
methods: { if thisisOnline // make network request that returns 'userData' object thisappData = userData this$offlineStorage else thisappData = this$offlineStorage }
- import the
VueOfflineStorage
instance if you want to use it somewhere else (e.g. Vuex store)
const cachedData = VueOfflineStorage
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
You can still make use of VueOfflineStorage
by importing it directly into your components:
name: 'MyComponent' methods: { if thisisOnline // make network request that returns 'userData' object thisappData = userData VueOfflineStorage else thisappData = VueOfflineStorage }