vue-moment-lib

vue-moment-lib

A Vue.js 2.0 MomentJS library

Make momentjs available in your template and Vue instance. Since it just try to map raw js function, api is mostly same asmomentjs.com. Making it easier to use in your Vue.js projects.

It added moment parse api as filters, component and vue instance moment functions mapping.

Installation

npm install --save moment vue-moment-lib

vue-moment-lib can be used as a module in CommonJS environments.

When in non-modular environment, vue-moment-lib will register all the components to vue by itself.

ES6

//
// Register the whole module with vue
//
import VueMomentLib from "vue-moment-lib";

// Install this library
Vue.use(VueMomentLib);

CommonJS

//
// Register the whole module with vue
//
var Vue = require("vue");
var VueMomentLib = require("vue-moment-lib").default;

// Install this library
Vue.use(VueMomentLib);

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/moment/moment.min.js"></script>
<script src="path/to/vue-moment-lib/dist/vue-moment-lib.umd.min.js"></script>
<!-- Filter and moment are registered globally -->

After that, you can use the duration and moment filters in your templates, api is slightly different as the first argument is passed through pipe:

<!-- first argument of moment filter is a parameter for parsing to UTC, it is set by default to false so it is optional when you use default parsing -->

<!-- Local format -->
<span>{{ Date.now() | moment().format("YYYY") }}</span>

<!-- time alias, isLocal + custom parsing + custom format -->
<span>{{ "11-14-2018" | time("MM-DD-YYYY").format("YYYY") }}</span>

<!--  Unix timestamp to utc -->
<span>{{ 1318781876 | unix().utc() }}</span>

<!-- Full date -->
<span>{{ Date.now() | utc().format("LLLL") }}</span>

<!-- -780 -->
<span>{{ "2013-01-01T00:00:00-13:00" | zone().utcOffset() }}</span>

<!-- a few seconds -->
<span>{{ 500 | duration().humanize() }}</span>

<!-- is not a duration -->
<span>{{ new Date() | isDuration }}</span>

And also, use the component instance functions in your templates to really use the same apis as momentjs:

<!-- Local format -->
<span>{{ $moment(Date.now()).format("YYYY") }}</span>

<!-- time alias, isLocal + custom parsing + custom format -->
<span>{{ $time("11-14-2018", "MM-DD-YYYY").format("YYYY") }}</span>

<!--  Unix timestamp to utc -->
<span>{{ $unix(1318781876).utc() }}</span>

<!-- Full date -->
<span>{{ $utc(Date.now()).format("LLLL") }}</span>

<!-- -780 -->
<span>{{ $zone("2013-01-01T00:00:00-13:00").utcOffset() }}</span>

<!-- a few seconds -->
<span>{{ $duration(500).humanize() }}</span>

<!-- is not a duration -->
<span>{{ $isDuration(new Date()) }}</span>

or

// in your components
computed: {
  thisYear () {
    // return this.$moment(Date.now()).format()
    return this.$time(Date.now()).format("YYYY") // moment (alias)
  },
  unixUtc () {
    return this.$unix(1318781876).utc(); // moment.unix
  },
  utc () {
    return this.$utc(Date.now()).format("LLLL"); // moment.utc
  },
  parseZone () {
    return this.$zone("2013-01-01T00:00:00-13:00").utcOffset(); // moment.parseZone
  },
  humanize () {
    return this.$duration(500).humanize(); // moment.duration
  },
  isDuration () {
    return this.$isDuration(new Date()); // moment.isDuration
  }
}

// it is also registered as a global function in the Vue instance
// so you can do in vuex store or everywhere else to retrieve the same moment instance you initialized
import Vue from 'vue'

const thisYear = Vue.time(Date.now()).format("YYYY"); // alias to moment
const unixUtc = Vue.unix(1318781876).utc();
const utc = Vue.utc(Date.now()).format("LLLL");
const parseZone = Vue.zone("2013-01-01T00:00:00-13:00").utcOffset();
const humanize = Vue.duration(500).humanize();
const isDuration = Vue.isDuration(new Date());

Custom moment instances

import yourMoment from "moment";
import VueMomentLib from "vue-moment-lib";

//
// customize your moment instance here (locales, config, etc)
//

// Install this library with custom moment instance
Vue.use(VueMomentLib, { moment: yourMoment });

Changelog

See the GitHub release history.

Contributing

See CONTRIBUTING.md.