soixantecircuits / idle-vue Goto Github PK

For most people this is just bloat, most people will not use this component so you're just adding kB to their JS asset size. Just include it in the package as an example or to be extended or whatever. Anyone who wants to use this component can include it themselves.

For most people it will not work properly since it tried to request a PNG icon at a path that almost nobody will use.

It would be great to be able to change the ideTime option that you can set initially in the options. In my case, I have users that want to be able to configure the idle time-out of modals. For this, the timeout setting is stored in localStorage, and I've got it fetching from there to set on the idleTime option, but I can't see a way of setting it after the initial app load. Only solution I could think of so far is to force a refresh, but I'm reluctant to do that as I believe it's bad practice in SPAs. Appreciate the help!

Instead of

use 

``` vue

or

```javascript

Makes reading cleaner

I am getting this error while configuring it in main.js file. If I change the extension of the include in the index.js file from import IdleView from './src/Idle'; to import IdleView from './src/Idle.vue'; it works fine, but after changing this the build command fails. Any ideas as to why this is happening?

First of all.. Thank you for your nice work with handling of idle state.

We've encountered warnings using idle-vue with Vue 3 - regarding new naming conventions in Vue 3. Where the destroyed() functionality is now called unmounted.

Could this be changed in at new version bundle, to support Vue 3 ?

I want to use idle-vue in an electron app using https://github.com/SimulatedGREG/electron-vue, but when I import idle-vue in my main.js file it throws an error:

Uncaught SyntaxError: Unexpected token import
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at eval (eval at <anonymous> (http://localhost:9080/renderer.js:1959:1), <anonymous>:1:18)

The main.js looks like this:

import 'basscss/css/basscss.min.css'
import 'flexboxgrid/css/flexboxgrid.min.css'

import 'gsap'

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './vuex/store'
import i18n from './locales/index'
import IdleVue from 'idle-vue'

import './lib/qrcode'

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

Vue.use(IdleVue, { store })

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  i18n,
  template: '<App/>'
}).$mount('#app')

It might happen because of a bad babel-loader configuration

I am using the latest version of the module.

This is how I am installing the module. I do not want to emit the event to all the component so I am omitting the eventHandler here.
Vue.use(IdleVue, { store, idleTime: 1*60*60*1000 });

I would expect that idleVue_onIdle event will not be called. But, in the console for each component, I am getting this error. Please see the screenshot here.

Just for the side note, I am able to watch the store property "isAppIdle" and it's working as expected. But, this console is making the things dirty.

Many thanks
Piyush

Is it possible to have multiple callbacks with different timings?

Getting error : Vue.extend is not a function

Vue.extend does not exist in Vue 3..

Getting a 404 error touch.ba3be66.png cannot be found.
Also getting a ton of JS errors in build.js?16a9:880

Uncaught TypeError: this.ctx.clearRect is not a function
at VueComponent.spriteRender (build.js?16a9:880)
at VueComponent.boundFn [as spriteRender] (vue.esm.js?65d7:180)
at VueComponent.spriteLoop (build.js?16a9:888)
at boundFn (vue.esm.js?65d7:179)

I think idletime option does not work even If I put 500ms.
Any example of implementing this plugin as component and passing custom idle time to it?
I would be grateful
Thanks

We are clearly missing some example for this component.

In the doc, we only refere to idle_onActivate

Currently the visibility is set to visible. If a div is with an opacity of 0 but stay visible, it is kept drawn on the screen.

I'm using this. It's working great. I have it working in a Quasar Framework app. I've been through all of the code here and in idle-js and I still don't see what is actually doing the countdown. What am I missing?

I'm trying to use this plugin in Nuxt.js.
So far I did (based on the example code):

1. npm install --save idle-vue
2. created /plugins/idle-vue.js with the following content:

import Vue from 'vue'
import IdleVue from 'idle-vue'

const eventsHub = new Vue()

Vue.use(IdleVue, {
  eventEmitter: eventsHub,
  idleTime: 10000
})

3. imported the plugin in /nuxt.config.js:

plugins: [
    { src: '@/plugins/idle-vue.js'}
  ],

4. added hooks to my Nuxt page Vue instance:

onIdle() {
  console.log('ZZZ');
},
onActive() {
  console.log('Hello');
},

This causes Nuxt to report reference error: "window is not defined"

Hello,

When building the project, Uglify throws this error.
ERROR in static/js/vendor.4955f0d5d2e9486bc600.js from UglifyJs Unexpected token: punc (()

As Evan explains in this discussion it's because idle-vue serves a non precompiled version of the file.

Could this be fixed? Thanks!

I see that idle-vue does not tracking idle timeout when the user navigate away to a different domain in browser address bar and return back after sometime (AFAIK). Is there any option available to track idle timeout in this scenario?

I added idle-vue with npm to my vue project and everything was working fine in run dev but when i tried to build my project I got the following error:

ERROR in static/js/vendor.87bf41a35bd9b3a1e693.js from UglifyJs Unexpected token: punc (() [./~/idle-vue/dist/build.js:678,0][static/js/vendor.87bf41a35bd9b3a1e693.js:12395,9]

Did anyone else experience this? I tried changing some settings in my .babelrc but I still get the error.

Hey,
Awesome job with idle-vue!

I don't understand why you are injecting a computed property to every Vue object.
Why don't you create a getter isAppIdle in the store and let us subscribe to that value? That would be way more flexible & practical ;)

Thanks a lot!

Gabriel,

Is it possible to get the event information directly through the evenEmitter (in isIdle() / isActive())? Currently, I am trying to switch to the active state on keyup (which works) however because IdleVue also listens for this event I get double events every time I keyup is emitted.

i am facing a problem while implementing in my whole project.
isIdle works fine when my project is opened in single tab but when i open my project on second tab and no one is working on that tab isIdle value gets true whereas it should be false as user is working on the other tab of the project
How may i make it possible that if user is working on one tab of a site isIdle state must be false for all other tabs as well.
i am getting state by following
import store from './store'
Vue.use(IdleVue, { store})

const vm = new Vue({
store,
computed: {
messageStr() {
return this.isAppIdle ? 'ZZZ' : 'Hello'
}
}
})
putting condition on
$store.state.idleVue.isIdle

Hello. Is there anyone of here have this issue where idle-vue works great in localhost but not in server? Thanks.

I have an application with idle-vue implemented.
After some time running on localhost and meanwhile refreshing the application it appears the nuxt app suddenly keeps loading and waiting for a process in idle-vue, keeping the screen white. This is after a manual page refresh. When I pause the debugger in DevTools, the file that is processed is always build.js in idle-vue. I don't really know how to reproduce this as it happens after a unknown period of time.

I know the package is no longer maintained but it's worth a shot as it's messing with my workflow bigtime.
Any people have experienced this or any hints on how to debug this situation?

Is there any way to stop idle tracking in a particular component and enable it after a certain interval?

I need to listen to a specific button, I've initialized the "events" as 'none'
and when I click on the button I'm changing the value of idleVue.isIdle in the store by committing a mutation:
this.$store.commit('idleVue/IDLE_CHANGED', false)
But the issue is, it's stopping to show me that notification after I clicked on that button (reset button).

How to make the package listen to a specific button?

I can't seem to find a type declaration file for idle-vue. Can you tell me if such a file exists and where I can find it?

instead of an object use the function writing.

data () {
    return {messageStr: 'Hello'}
  },

I'm trying to change the boolean value of the isIdle, bypassing a boolean param to the mutation idleVue/IDLE_CHANGED.
The code:
this.$store.commit('idleVue/IDLE_CHANGED', false)
And It does change the value of the isIdle in the store, but the timer after that doesn't work.

Do you have any idea about that?

Replace doublequote by singlequote

isAppIdle returns true when the page initially loads or the route is refreshed with router.go()

Is this project still being maintained?

I try add idle-vue to my Nuxt app. But when I use idle-view to view. it is show error
Property or method "isIdle" is not defined on the instance but referenced during render

This my config:
plugins/idle-vue.js:

import IdleVue from 'idle-vue'
import Vue from 'vue'
import Vuex from 'vuex'
import IdleVueComponent from 'idle-vue/src/components/Idle.vue'

const store = new Vuex.Store({})

const eventsHub = new Vue()
Vue.component('idle-view', IdleVueComponent)
Vue.use(IdleVue, {
  eventEmitter: eventsHub,
  store,
  idleTime: 10000
})

nuxt.config.js

plugins: [
    {
      src: '~/plugins/firebase.js',
      ssr: false
    },
...
  ],

pages/index.vue

.form-group
  idle-view

I use nuxt ^2.6.2. Please help me. Thank you

Hi Guys,

Do you have typescript support? When I try following the example it tells me that on onIdle() is not a function?

How to enable support for multiple tabs opened of the same app ?

Currently, plugin works fine for single tab.

eventHub is not mandatory.

It should comes in an other example and thus allow to understand the very simplicity of the module.

Maybe put two example.

onActive() Hook works only on first tab

Hi!

I'm trying to set and get the idle time from a propety we've stored in our own vuex store and we've run in to a road block.

I want to try something like this, but whenever I try, the idleTime property is not available in vuex, where is this stored?

Is it possible to change the idleTime property during runtime or is it only during mounting the App component that it can be 'hot-reloaded'?

//IdleTime setup:
import Vue from 'vue';
import IdleVue from 'idle-vue';
import store from '@/store';

Vue.use(IdleVue, {
    // idleTime: 15000, // unable to change when un-commented
    store
});

//Store - different file
const state = {
    idleVue: {
        idleTime: 5000,
        isIdle: true
    }
};

export default {
    state
};```