vue-timers

    2.0.4 • Public • Published

    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

    Keywords

    none

    Install

    npm i vue-timers

    DownloadsWeekly Downloads

    2,583

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    32.2 kB

    Total Files

    16

    Last publish

    Collaborators

    • kelin2025