Vue 3 support

[LauBeck]

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 ?

[Hoviadin]

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

[Hoviadin]

@afonso @gabrielstuff @emmanuelgeoffray

[MoeBensu]

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

[brent-williams]

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

[ux-engineer]

Upcoming?

[ghost]

Upcoming?

[pratik227]

https://github.com/soixantecircuits/idle-vue/pull/59

[liamcharmer]

@pratik227 how can this be implemented into Nuxt 3?

[pratik227]

@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.