Package Exports
- vue-now
- vue-now/dist/vue-now.js
- vue-now/src/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-now) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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