Package detail

vue-idle-runner

scmp10ISC1.2.0

Vue component and mixin for running component / function in each idle call.

readme

Vue-Idle-Runner

Vue module with component wrapper and mixin for running component / function in each idle call, this help a lot for better performance and follow the principle of Lighthouse audit for performance in First CPU Idle and Time to Interactive, so that each component or function can be run individually rather than running at the same time

Usage

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueIdleRunner from 'vue-idle-runner'

Vue.use(VueIdleRunner)

// or with options
Vue.use(VueIdleRunner, {
  onLoadTimeout: 10000,
})

Constructor Options

key description default options
onLoadTimeout Run the onload idle task after a certain time in millisecond even page onload still not complete 0 Number

You can use idle queue by template markup or use it individually by function call, you can also use the mixin.

By Function:

Options

key description default options
onLoadTimeout Run the onload idle task after a certain time in millisecond even page onload still not complete 0 Number
onload Run the idle task after page onload false Boolean 
this.$idleQueue(function() {
  console.log('I am run by idleQueue after page onload')
}, {onload: true})

this.$idleQueue(function() {
  console.log('I am run by idleQueue')
})

By template:

<idle-queue>
  <any-component />
</idle-queue>

After page onload:

<onload-idle-queue>
  <any-component />
</onload-idle-queue>

After page onload / by timeout:

<onload-idle-queue onLoadTimeout=500>
  <any-component />
</onload-idle-queue>

By mixin:

<template>
  <any-component v-if="isIdle" />
</template>
<script>
// a reactive property `this.isIdle` can be access
import idle from 'vue-idle-runner/dist/mixins/idle'
export default {
  mixins: [idle],
}
</script>

After page onload:

<template>
  <any-component v-if="isOnloadIdle" />
</template>
<script>
// a reactive property `this.isOnloadIdle` can be access
import onLoadIdle from 'vue-idle-runner/dist/mixins/onLoadIdle'
export default {
  mixins: [onLoadIdle],
}
</script>