https://github.com/julon/vue-moment-lib
A simple Vue.js 2.0 MomentJS library (filters & globals)
https://github.com/julon/vue-moment-lib
momentjs vue vue-moment vue-plugin
Last synced: 8 months ago
JSON representation
A simple Vue.js 2.0 MomentJS library (filters & globals)
- Host: GitHub
- URL: https://github.com/julon/vue-moment-lib
- Owner: julon
- License: mit
- Created: 2018-01-20T19:20:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-29T04:54:41.000Z (over 5 years ago)
- Last Synced: 2024-04-24T20:42:15.762Z (over 1 year ago)
- Topics: momentjs, vue, vue-moment, vue-plugin
- Language: JavaScript
- Homepage:
- Size: 509 KB
- Stars: 30
- Watchers: 2
- Forks: 8
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-vue-zh - Vue矩-LIB - 使用相同的momentjs API的简单Vue.js 2.0 MomentJS库 (过滤器和全局变量) . (UI组件 / 时间)
- awesome-vue - vue-moment-lib - A simple Vue.js 2.0 MomentJS library (filters & globals) using the same momentjs API. (Components & Libraries / UI Components)
- awesome-vue - vue-moment-lib ★22 - A simple Vue.js 2.0 MomentJS library (filters & globals) using the same momentjs API. (UI Components / Time)
- awesome-vue - vue-moment-lib - A simple Vue.js 2.0 MomentJS library (filters & globals) using the same momentjs API. (UI Components / Time)
- awesome-vue - vue-moment-lib - A simple Vue.js 2.0 MomentJS library (filters & globals) ` 📝 2 years ago` (UI Components [🔝](#readme))
README
# 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.
### 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
```
### 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
{{ Date.now() | moment().format("YYYY") }}
{{ "11-14-2018" | time("MM-DD-YYYY").format("YYYY") }}
{{ 1318781876 | unix().utc() }}
{{ Date.now() | utc().format("LLLL") }}
{{ "2013-01-01T00:00:00-13:00" | zone().utcOffset() }}
{{ 500 | duration().humanize() }}
{{ new Date() | isDuration }}
```
### And also, use the component instance functions in your templates to really use the same apis as momentjs:
```html
{{ $moment(Date.now()).format("YYYY") }}
{{ $time("11-14-2018", "MM-DD-YYYY").format("YYYY") }}
{{ $unix(1318781876).utc() }}
{{ $utc(Date.now()).format("LLLL") }}
{{ $zone("2013-01-01T00:00:00-13:00").utcOffset() }}
{{ $duration(500).humanize() }}
{{ $isDuration(new Date()) }}
```
### 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).