Vue crono

Simple timers/jobs for vue components

Version: 2.0.9 Updated: 08/19/2020

By: BrianRosamilia License: MIT

Downloads Last 30 Days: 547



Easily schedule and manage cron jobs in Vue components

jsfiddle example

Project Example here

Project Example Source here


npm install vue-crono --save

Install globally

import crono from 'vue-crono';

or inside your component

import { crono } from 'vue-crono';

//Your component
export default{
    mixins: [crono]

or include from

<script src=""></script> which will put the plugin on window.crono

or npm install the package and browse to node_modules/vue-cron/dist/index.js and copy the file into your application


Schedule Vue methods to run on interval using the cron property on your Vue component. cron also accepts an array of objects to call multiple methods.

cron option structure is as follows

    // Number in milliseconds
    time: Number,

    // Vue component method name
    method: String,

    // Automatic Start (true by default)
    autoStart: true

Example Component to keep a timer up to date.

Other use cases:

  • Polling to check a status
  • Refreshing data from a service periodically
  • Warning a user about a time sensitive action


export default{
        return {
            currentTime: undefined,
          this.currentTime = (new Date().toLocaleTimeString());
        time: 1000,
        method: 'load'

Multiple cron definition:

    time: 5000,
    method: 'load',
    time: 32000,
    method: 'stopTimer'


If you create jobs via the cron option, you can start, stop, and restart them on the component instance using




Note: Jobs are restarted from the beginning after being stopped. Timers are cleaned up when components are destroyed.

You can adjust the time of existing jobs, even while they're running, using

this.$cron.time(methodName, time)

This method is intelligent enough to know if the timer should have been invoked when decreasing the time of a job as well as extending the time to the next job run if you're increasing the timer. Adjusting the time on a stopped job will behave as though you started it from scratch. (See unit tests if curious about this behavior)

clean-time Component


import cleanTime from 'vue-crono/cleanTime'

A Vue component that provides human readable, realtime updated, timestamp for past events. Supports localization and custom template strings.

clean-time requires a single prop time (a Date object) and offers some customization props.

Example here

Example Source here

Categories: Vue js