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
npm install vue-nowRegister 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>Changelog
Contributing
License
MIT License