soixantecircuits/idle-vue

Vue 3 support

Opened this issue ยท 9 comments

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 ?

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

@LauBeck were you able to make the plugin compatible with Vue 3 or have you maybe found any other good alternatives?

@MoeNeuron idle-vue just wraps idle-js, you can use idle-js directly in Vue 3 without any issues.

Upcoming?

Upcoming?

@pratik227 how can this be implemented into Nuxt 3?

@liamcharmer

I think you need to create one plugin like idle-vule.js file where you need to register the idle-vue and then add that in nuxt.config.ts.

//idle.js
import IdleVue from "idle-vue";
import emitter from "tiny-emitter/instance";

export default function ({ app }) {
  app.use(IdleVue, {
    eventEmitter: {
      $on: (...args) => emitter.on(...args),
      $once: (...args) => emitter.once(...args),
      $off: (...args) => emitter.off(...args),
      $emit: (...args) => emitter.emit(...args)
    },
    idleTime: 1000
  });
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'idle.js',
  ],
})

Something like this Not familiar with Nuxt too much but you can try this.