Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
idle-vue
is a Vue.js plug-in, that detects when the user hasn't interacted with your app for a while. idle-vue
is meant to be used with Vue, Vuex and either Webpack or Browserify.
idle-vue
is based on idle-js.
npm install --save idle-vue
At the root of your project, just before creating your Vue application, import the idle-vue
plug-in, and add it to the Vue global with the following code:
import Vue from 'vue'
import IdleVue from 'idle-vue'
const options = { ... }
Vue.use(IdleVue, options)
Vue.use
is a Vue method that installs the given plugin (here, IdleVue), and passes it the given options.
The above code does three things:
Add two hooks onIdle
and onActive
to all Vue objects
Add a computed value isAppIdle
to all Vue objects
Create an idle-view
component in every Vue object
The plug-in adds two hooks to Vue: onIdle
and onActive
; those functions may be defined in any Vue object (components included), and will be called by the plug-in when the window respectively starts and stops idling.
These hooks are not methods; they should be added directly at the Root of your component. These hooks will not be called if the options
object has no eventEmitter
field.
main.js
import Vue from 'vue'
import IdleVue from 'idle-vue'
const eventsHub = new Vue()
Vue.use(IdleVue, {
eventEmitter: eventsHub,
idleTime: 10000
})
const vm = new Vue({
el: '#app',
data () {
return {
messageStr: 'Hello'
}
},
onIdle() {
this.messageStr = 'ZZZ'
},
onActive() {
this.messageStr = 'Hello'
}
})
index.html
<div id=app>
<p>
{{ messageStr }}
</p>
</div>
isAppIdle
The plug-in adds a computed value isAppIdle
to every Vue object.
It's a shorthand for the current value of store.state.idleVue.isIdle
; this value will always be undefined
if the options
object has no store
field.
Note that using isAppIdle
or using the hooks onIdle
and onActive
are both different, valid ways of doing the same thing: detecting when your app is idle. You can use either or both of them depending on your needs.
main.js
import Vue from 'vue'
import IdleVue from 'idle-vue'
import Vuex from 'vuex'
const store = new Vuex.Store({
// ...
})
Vue.use(IdleVue, { store })
const vm = new Vue({
el: '#app',
store,
computed: {
messageStr() {
return this.isAppIdle ? 'ZZZ' : 'Hello'
}
}
})
index.html
<div id=app>
<p>
{{ messageStr }}
</p>
</div>
The plug-in also adds a component named IdleView
(or idle-view
) to Vue.
idle-view
is automatically available in every Vue component once Vue.use(IdleVue, ...)
is called; it can be used without using the components
parameter.
This component is a default idle overlay with a small "touch the screen" sprite; it has no props and no slots. You may create your own idle overlay by exploiting isAppIdle
.
This component will not be added if the options
object has no store
field.
main.js
import IdleVue from 'idle-vue'
import Vuex from 'vuex'
const eventsHub = new Vue()
const store = new Vuex.Store({
// ...
})
Vue.use(IdleVue, { eventEmitter: eventsHub, store })
const vm = new Vue({
el: '#app',
store,
// ...
})
index.html
<div id=app>
<p>
Hello world!
...
</p>
<idle-view />
</div>
idle-vue
accepts the following options when loaded; all of them are facultative, except store
or eventEmitter
; they cannot be both omitted:
eventEmitter: The Vue instance through which the idle-vue
plugin is to send events. The plugin will send idleVue_onIdle
and idleVue_onActive
events to this instance; all Vue objects created after the plugin is loaded will run their onIdle
and onActive
hooks when idleVue_onIdle
and idleVue_onActive
events are sent.
store: The Vuex instance which stores the state of the app (idle or active); this store has a state idleVue.isIdle
and a mutation idleVue/IDLE_CHANGED(isIdle)
.
idleTime: The time (in ms) without input before the program is considered idle. For instance, with idleTime: 40000
, the module will emit idle events after 40 seconds of inactivity. Default value: 60000
(one minute).
events: Events that "break" idleness. Default value: ['mousemove', 'keydown', 'mousedown', 'touchstart']
keepTracking: Whether you want to track more than once. Default value: true
.
startAtIdle: Start in idle state. Default value: true
.
moduleName: The name of the vuex
module (if store
is defined), and the prefix of the emitted events (if eventEmitter
is defined). Default value: idleVue
.
Thanks for helping us!
Please follow the following standards when submitting a pull request:
FAQs
Vue component wrapper for idle-js
We found that idle-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.