Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
vue-offline
Advanced tools
Readme
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
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)
This plugin contains two features:
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 componentexport default {
name: 'MyComponent',
mounted () {
this.$on('offline' () => {
alert('You are offline! The website will not work')
})
}
}
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')
})
}
}
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 storageTo use this storage inside your app you can either
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')
}
}
}
}
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')
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')
}
}
}
}
FAQs
Offline states and storage for Vue.js apps and Progressive Web Apps
The npm package vue-offline receives a total of 2,291 weekly downloads. As such, vue-offline popularity was classified as popular.
We found that vue-offline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.