Vue Now

Reactive Date.now() timestamp for Vue. Mixin injects $now computed property into component and reactively updates it every period milliseconds (1000 by default)

• Install
  • NPM
  • CDN
• Usage
• Changelog
• Contributing
• License

Install

NPM

npm install vue-now

Register locally in your component

import VueNow from 'vue-now';

// Your component
export default {
    mixins: [VueNow],
}

Or register globally in the root Vue instance

import Vue from 'vue';

// as a plugin
// second argument is optional use it to specify interval period in milliseconds
import {VueNowPlugin} from 'vue-now';
Vue.use(VueNowPlugin, 3000);

// or as a mixin
import VueNow from 'vue-now';
Vue.mixin(VueNow);

// or as a mixin with options
import {VueNowMixinFactory} from 'vue-now';
Vue.mixin(VueNowMixinFactory(1000));

CDN

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Include the `vue-now` script on your page after Vue script -->
<script src="https://unpkg.com/vue-now"></script>

<script>
// Register as a plugin
Vue.use(VueNow.VueNowPlugin, 1000);

// or as a mixin
Vue.mixin(VueNow.VueNowMixin);

// or as a mixin with options
Vue.mixin(VueNow.VueNowMixinFactory(1000));

new Vue({
// ...
});
</script>

Usage

$now computed property is exposed in Vue component, it reactively updated each period milliseconds (1000 by default)

<script>
  export default {
    computed: {
      nowFormatted() {
        return new Date(this.$now).toISOString();
      },
    },
  }
</script>
<template>
  {{ $now }} <br>
  {{ nowFormatted }}
</template>

Example

Changelog

CHANGELOG.md

Contributing

CONTRIBUTING.md

License

MIT License