vue-moment-lib
Version:
A Vue.js 2.0 MomentJS library
171 lines (125 loc) • 4.98 kB
Markdown
# vue-moment-lib
[](https://github.com/semantic-release/semantic-release)
[](https://travis-ci.org/julon/vue-moment-lib)
[](https://greenkeeper.io/)
> 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 as[momentjs.com](https://momentjs.com/docs). 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.</p>
### ES6
```js
//
// Register the whole module with vue
//
import VueMomentLib from "vue-moment-lib";
// Install this library
Vue.use(VueMomentLib);
```
### CommonJS
```js
//
// Register the whole module with vue
//
var Vue = require("vue");
var VueMomentLib = require("vue-moment-lib").default;
// Install this library
Vue.use(VueMomentLib);
```
### Browser
```html
<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:
```html
<!-- 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:
```html
<!-- 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
```js
// 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
```js
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](https://github.com/julon/vue-moment-lib/releases).
## Contributing
See [CONTRIBUTING.md](.github/CONTRIBUTING.md).