vue-timers

vue-timers

Simple mixin to manage timers or intervals for Vue.js

Installation

1.1 Use CDN

<script src="https://cdn.jsdelivr.net/npm/vue-timers/dist/vue-timers.umd.js"></script>

1.2 Install from package manager

npm install vue-timers
yarn add vue-timers

2.1. Global import

import Vue from 'vue'
import VueTimers from 'vue-timers'
 
Vue.use(VueTimers)

2.2. Or use mixin for the specific component

import {mixin as VueTimers} from 'vue-timers'
 
export default {
  mixins: [VueTimers]
}

2.3. Nuxt plugins

nuxt.config.js:

export default {
  plugins: [
    { src: '~/plugins/vue-timers', mode: 'client' }
  ]
}

plugins/vue-timers.js:

import Vue from 'vue'
import VueTimers from 'vue-timers'
 
Vue.use(VueTimers)

What it does?

It creates timer instances in components and slightly reduces boilerplate code with their handling.
See the following code

export default {
  methods: {
    log () {
      console.log('Hello world')
    }
  },
  created () {
    // It looks OK for the first look
    // But imagine that you have more than one timer
    this.$options.interval = setInterval(this.log, 1000)
    // Ok? What about check if timer works?
    // And it's not reactive so you should create data option
    console.log(this.$options.interval !== null)  
    // Still ok? So what about reusable timers?
    // New method for that? Rly?  
  },
  // Did you forget that it should be destroyed?
  beforeDestroy () {
    clearInterval(this.$options.interval)
  }
}

It's ugly, isn't it? So let's try to fix this :)

Same code with vue-timers:

export default {
  timers: {
    log: { time: 1000, autostart: true }
  },
  methods: {
    log () {
      console.log('Hello world')
    }
  }
}

Configuration

Timer object

{
  // Name of timer
  // Default: timer key (with object notation)
  name: String,
 
  // Tick callback or method name from component
  // Note: callback is binded to component instance
  // Default: name
  callback: Function/String,
 
  // Autostart timer from created hook
  // Default: false
  autostart: Boolean,
 
  // Set true to repeat (with setInterval) or false (setTimeout)
  // Default: false
  repeat: Boolean,
 
  // Set true to call first tick immediate 
  // Note: repeat must be true too
  // Default: false
  immediate: Boolean,
 
  // Time between ticks
  // Default: 1000
  time: Number
  
  // Switch timer`s status between activated and deactivated
  // Default: false
  isSwitchTab: Boolean
}

Changing timer duration

this.timers.log.time = 2000

NOTE: you should restart timer to apply changes

Component methods

// Starts `log` timer
this.$timer.start('log')
// Stops `log` timer
this.$timer.stop('log')

isRunning property

this.timers.log.isRunning

Events

TimerComponent.vue

 
import { timer } from 'vue-timers'
 
export default {
  timers: [
    timer('log', 1000)
  ],
  methods: {
    log () {
      console.log('It works!')
    }
  }
}

App.vue

<template>
  <timer-component
    @timer-start:log="timerStarted"
    @timer-stop:log="timerStopped"
    @timer-tick:log="timerTicked"
  />
</template>

3 ways of timers declaration

Object notation

export default {
  timers: {
    log: { time: 1000, ...options }
  }
}

Array notation

export default {
  timers: [
    { name: 'log', time: 1000, ...options }
  ]
}

Helper function

import { timer } from 'vue-timers'
 
export default {
  timers: [
    timer('log', 1000, { ...options })
  ]
}

Author

Anton Kosykh

License

MIT