@skyrpex/now

Vue mixin that generates a reactive time variable

Version: 1.1.0 Updated: 04/10/2017

By: skyrpex License: MIT

Downloads Last 30 Days: 36

Install

npm i @skyrpex/now
yarn add @skyrpex/now

Repository: https://github.com/skyrpex/now

CDNs

bundle.run: https://bundle.run/@skyrpex/now

jsDelivr: https://cdn.jsdelivr.net/npm/@skyrpex/now

unpkg: https://unpkg.com/@skyrpex/now

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
});
Categories: Vue js