Comments (10)
declare module 'idle-vue' {
import Vue, { PluginFunction } from 'vue'
export interface IdleVueUseOptions {
events?: string[]
eventEmitter?: any
idleTime?: number
keepTracking?: boolean
moduleName?: string
startAtIdle?: boolean
store?: any
}
module "vue/types/vue" {
interface Vue {
isAppIdle: boolean
}
}
// In case you want to vue.extend format
module "vue/types/options" {
interface ComponentOptions<V extends Vue> {
onIdle?: () => void
onActive?: () => void
}
}
export function install(): PluginFunction<IdleVueUseOptions>
}
And here is the index.d.ts
from idle-vue.
FYI, you need to register the hooks before all of your codes.
Can you please try if it work or not?
As the above solutions is related to auto-suggestion on IDE only, it will not affect the real implementation in your code, if it still doesn't work I guess you may need to take a look on your store ?
// main.ts (Top)
import './class-component-hooks.ts'
// class-component-hooks.ts
Component.registerHooks([
'onIdle',
'onActive'
])
And if you want to use it in decorator format, I suggest you give it a try
https://github.com/vip30/vue-plugin-helper-decorator
My code as following:
// main.ts
Vue.use(IdleVue, {
eventEmitter: new Vue(),
keepTracking: true,
idleTime: 180000
})
// xxx.vue
@Component({})
export default class App extends Vue {
@OnActive()
public callItWhenActive() {
console.log('active')
}
}
from idle-vue.
Vue.use(IdleVue, {
eventEmitter: new Vue(),
store,
idleTime: 500
})
// class-component-hooks.js
Component.registerHooks([
'onIdle',
'onActive'
])
// Use either watch
@Watch('isAppIdle')
public onIdle() {
console.log('Idle')
}
// or hooks
public onActive() {
console.log('Active')
}
This is work for me (using vue-class-component)
from idle-vue.
Thank you so much for this
from idle-vue.
Just to confirm, i can use either the index.d.ts or the Vue class component one? Or are they meant to be put together?
from idle-vue.
You need to use that together
D.ts is for the type declaration (so it can pass the compile and so the intellisense in Ide will work)
And the vue class component is the real implmentation
from idle-vue.
This works perfectly. Thank you so much for your help
from idle-vue.
Can you tell my what I might be doing wrong? Here's my Main.ts
I added idle-vue.d.ts to my src directory root with the contents of your index.d.ts
No errors, nothing happens. isAppIdle is undefined.
`
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store/store';
import * as IdleVue from 'idle-vue';
import Component from 'vue-class-component';
Vue.config.productionTip = false;
// Setup idle-vue
Vue.use(IdleVue, {
eventEmitter: new Vue(),
store,
idleTime: 500
});
Component.registerHooks([
'onIdle',
'onActive'
])
new Vue({
el: '#app',
router,
store,
components: { App },
onIdle() {
console.log('Idle')
},
onActive() {
console.log('Active')
},
template: '',
});`
from idle-vue.
Cool, I'll check it out. We wrote Window.SetTimeout version in the meantime. We need a warning followed by a log out. I suppose I could add a timeout to OnIdle()
from idle-vue.
from idle-vue.
Related Issues (20)
- Error: 'idleVue_onIdle' of undefined HOT 2
- How to pause or stop idle and start again HOT 2
- isAppIdle returns true the moment the app loads/Route refreshes HOT 2
- what is the actual timer in this? I don't understand HOT 2
- This project still maintained? HOT 2
- Difficulty dynamically setting idleTime HOT 3
- reference error: "window is not defined" when using in Nuxt.js HOT 2
- onActive() Hook works only on first tab
- Can the idleTime be set after initialisation? HOT 3
- isIdle for All Tabs HOT 5
- nuxt with idle-view ? HOT 2
- idle-vue seems to prevent reload nuxt app
- Vue 3 support HOT 9
- Tracking idle timeout when the user navigate away to a different domain and return back
- Inquiry about tracking the idle users HOT 1
- Not working when deployed to server. Anyone has this issue? HOT 4
- Update the value of the isIdle in vuex by calling a mutation.
- Does idle-vue support TypeScript?
- Is idle vue supports foe multiple tabs ? HOT 1
- vue3 compatible? Vue.extend is not a function
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from idle-vue.