CODEWITHSUNDEEP
momentjsvue.js
Set Kyar Wa Lar
Set Kyar Wa Lar

Reputation: 4634

Moment.js with Vuejs

I try to print out date time using like the following in vue-for

{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}

but, it does not appear. It's just a blank. How I can try to use moment in vue?

Upvotes: 188

Views: 267337

Answers (14)

Kendouci Ilyes
Kendouci Ilyes

Reputation: 51

Install the moment module:

npm i moment

In your vue component:

import moment from 'moment';
export default {
   data(){

   },
   methods:{
     moment(date){ return moment(date) }
   }
}

Inside the template:

<span>{{ moment().format('MMMM Do YYYY, h:mm:ss a') }}</span>

Upvotes: 0

Dev-Raldin
Dev-Raldin

Reputation: 33

I've read the solutions posted here and it seems to be more complex than my solution so I'm presenting this one, what I do is like this

The thing you need:

import moment from 'moment';
...
data() {
  return {
    moment: moment, // This is the one line of code that you need
  }
}

So this is what it looks like

HTML (Now this works):

<h1>{{moment().format('MMMM Do YYYY, h:mm:ss a')}}</h1>

JS:

import moment from 'moment';

export default {
  data() {
    return {
      moment: moment, // This is the one line of code that you need
    }
  }
}

Upvotes: 1

Muhammad Shahzad
Muhammad Shahzad

Reputation: 9652

Moment.js with Vue3 js

npm install moment --save   # npm
yarn add moment             # yarn

Main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import moment from 'moment'

const app = createApp(App)

app.config.globalProperties.$moment = moment

app.use(router).mount('#app')

Used moments in vue3 js component

{{ $moment(item.created_at).format("YYYY-MM-DD") }}  // 2021-07-03

Upvotes: 6

Paweł Gościcki
Paweł Gościcki

Reputation: 9604

In your package.json in the "dependencies" section add moment:

"dependencies": {
  "moment": "^2.15.2",
  ...
}

In the component where you would like to use moment, import it:

<script>
import moment from 'moment'
...

And in the same component add a computed property:

computed: {
  timestamp: function () {
    return moment(this.<model>.attributes['created-at']).format('YYYY-MM-DD [at] hh:mm')
  }
}

And then in the template of this component:

<p>{{ timestamp }}</p>

Upvotes: 40

max
max

Reputation: 1589

I made it work with Vue 2.0 in single file component.

npm install moment in folder where you have vue installed

<template>
  <div v-for="meta in order.meta">
    {{ getHumanDate(meta.value.date) }}
  </div>
</template>

<script>
    import moment from 'moment';
    export default {
         methods: {
            getHumanDate : function (date) {
                return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
            }
        }
    }
</script>

Upvotes: 21

Geng Jiawen
Geng Jiawen

Reputation: 9154

If your project is a single page application, (eg project created by vue init webpack myproject), I found this way is most intuitive and simple:

In main.js

import moment from 'moment'

Vue.prototype.moment = moment

Then in your template, simply use

<span>{{moment(date).format('YYYY-MM-DD')}}</span>

Upvotes: 188

Awais Jameel
Awais Jameel

Reputation: 2206

vue-moment

very nice plugin for vue project and works very smoothly with the components and existing code. Enjoy the moments...😍

// in your main.js
Vue.use(require('vue-moment'));
// and use in component
{{'2019-10-03 14:02:22' | moment("calendar")}}
// or like this
{{created_at | moment("calendar")}}

Upvotes: 1

tao
tao

Reputation: 90068

global members are not available by default in your <template>'s scope. But you can easily pass them on using computed properties.

computed: {
  moment: () => moment,
  console: () => console,
  window: () => window
}

Now you can use any of them in your template. i.e: console.log(moment(), window).

Note this doesn't add any overhead.

Upvotes: 1

Jiro Matchonson
Jiro Matchonson

Reputation: 981

For moment.js at Vue 3

npm install moment --save

Then in any component

import moment from 'moment'

...

export default {
  created: function () {
    this.moment = moment;
  },

...

<div class="comment-line">
   {{moment(new Date()).format('DD.MM.YYYY [&nbsp;] HH:mm')}}
</div>

Upvotes: 6

Non404
Non404

Reputation: 1293

TESTED

import Vue from 'vue'
    
Vue.filter('formatYear', (value) => {
  if (!value) return ''
  return moment(value).format('YYYY')
})

Upvotes: 0

Rinat Sadykov
Rinat Sadykov

Reputation: 353

// plugins/moment.js

import moment from 'moment';

moment.locale('ru');

export default function install (Vue) {
  Object.defineProperties(Vue.prototype, {
    $moment: {
      get () {
        return moment;
      }
    }
  })
}

// main.js

import moment from './plugins/moment.js';
Vue.use(moment);

// use this.$moment in your components

Upvotes: 8

Atchutha rama reddy Karri
Atchutha rama reddy Karri

Reputation: 1569

Here is an example using a 3rd party wrapper library for Vue called vue-moment.

In addition to binding Moment instance into Vue's root scope, this library includes moment and duration filters.

This example includes localization and is using ES6 module imports, an official standard, instead of NodeJS's CommonJS module system requires.

import Vue from 'vue';

import moment from 'moment';
import VueMoment from 'vue-moment';

// Load Locales ('en' comes loaded by default)
require('moment/locale/es');

// Choose Locale
moment.locale('es');

Vue.use(VueMoment, { moment });

Now you can use the Moment instance directly in your Vue templates without any additional markup:

<small>Copyright {{ $moment().year() }}</small>

Or the filters:

<span>{{ 3600000 | duration('humanize') }}</span>
<!-- "an hour" -->
<span>{{ [2, 'years'] | duration('add', 1, 'year') | duration('humanize') }}</span>
<!-- "3 years" -->

Upvotes: 9

CodeFromthe510
CodeFromthe510

Reputation: 556

I'd simply import the moment module, then use a computed function to handle my moment() logic and return a value that's referenced in the template.

While I have not used this and thus can not speak on it's effectiveness, I did find https://github.com/brockpetrie/vue-moment for an alternate consideration

Upvotes: 0

pespantelis
pespantelis

Reputation: 15372

With your code, the vue.js is trying to access the moment() method from its scope.

Hence you should use a method like this:

methods: {
  moment: function () {
    return moment();
  }
},

If you want to pass a date to the moment.js, I suggest to use filters:

filters: {
  moment: function (date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a');
  }
}

<span>{{ date | moment }}</span>

[demo]

Upvotes: 295

Related Questions