@skyrpex/now

Vue mixin that generates a reactive time variable

Usage no npm install needed!

<script type="module">
  import skyrpexNow from 'https://cdn.skypack.dev/@skyrpex/now';
</script>

README

Now

CircleCI AppVeyor Build status TravisCI Build status

Works with:

Vue 2 Vue 1

This mixin will create a computed property with a Moment.js instance. The computed property will be updated at a given interval to stay up to date.

Installation

npm install @skyrpex/now

Usage

Minimal setup

<template>
  <div>
    <!-- Print the current time, and update each second. -->
    <p>{{ now }}</p>
  </div>
</template>

<script>
import now from '@skyrpex/now';

export default {
  mixins: [
    // Will inject a 'now' computed property
    now({ /* options... */ }),
  ],
};
</script>

Another use case

<template>
  <div>
    <!-- You can use any Moment.js method -->
    <p>{{ now.from(createdAt) }}</p>
  </div>
</template>

<script>
import moment from 'moment';
import now from '@skyrpex/now';

export default {
  mixins: [now()],
  data: () => ({
    createdAt: moment([2007, 0, 28]),
  }),
};
</script>

Options

import now from '@skyrpex/now';

now({
  name: 'now', // Name of the computed property
  interval: 1000, // Update interval
});