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//; // Install this libraryVue;
CommonJS
//// Register the whole module with vue//var Vue = ;var VueMomentLib = default; // Install this libraryVue;
Browser
<!-- 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 -->{{ Date.now() | moment().format("YYYY") }} <!-- time alias, isLocal + custom parsing + custom format -->{{ "11-14-2018" | time("MM-DD-YYYY").format("YYYY") }} <!-- Unix timestamp to utc -->{{ 1318781876 | unix().utc() }} <!-- Full date -->{{ Date.now() | utc().format("LLLL") }} <!-- -780 -->{{ "2013-01-01T00:00:00-13:00" | zone().utcOffset() }} <!-- a few seconds -->{{ 500 | duration().humanize() }} <!-- is not a duration -->{{ new Date() | isDuration }}
And also, use the component instance functions in your templates to really use the same apis as momentjs:
<!-- Local format -->{{ $moment(Date.now()).format("YYYY") }} <!-- time alias, isLocal + custom parsing + custom format -->{{ $time("11-14-2018", "MM-DD-YYYY").format("YYYY") }} <!-- Unix timestamp to utc -->{{ $unix(1318781876).utc() }} <!-- Full date -->{{ $utc(Date.now()).format("LLLL") }} <!-- -780 -->{{ $zone("2013-01-01T00:00:00-13:00").utcOffset() }} <!-- a few seconds -->{{ $duration(500).humanize() }} <!-- is not a duration -->{{ $isDuration(new Date()) }}
or
// in your componentscomputed: { // return this.$moment(Date.now()).format() return this // moment (alias) } { return this; // moment.unix } { return this; // moment.utc } { return this; // moment.parseZone } { return this; // moment.duration } { return this; // 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 const thisYear = Vue; // alias to momentconst unixUtc = Vue;const utc = Vue;const parseZone = Vue;const humanize = Vue;const isDuration = Vue;
Custom moment instances
;; //// customize your moment instance here (locales, config, etc)// // Install this library with custom moment instanceVue;
Changelog
See the GitHub release history.
Contributing
See CONTRIBUTING.md.