Moment.js con Vuejs

Intento imprimir la fecha y la hora usando lo siguiente en vue-for

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

pero no aparece. Es solo un espacio en blanco. ¿Cómo puedo intentar usar moment in vue?

Con su código, vue.jsestá intentando acceder al moment()método desde su alcance.

Por lo tanto, debe usar un método como este:

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

Si desea pasar una fecha al moment.js, sugiero usar filtros:

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

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

[manifestación]

Si su proyecto es una aplicación de una sola página (por ejemplo, un proyecto creado por vue init webpack myproject), descubrí que esta forma es más intuitiva y simple:

En main.js

import moment from 'moment'

Vue.prototype.moment = moment

Luego, en su plantilla, simplemente use

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

En su package.jsonen la "dependencies"sección agregar momento:

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

En el componente donde le gustaría usar moment, impórtelo:

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

Y en el mismo componente agregue una propiedad calculada:

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

Y luego en la plantilla de este componente:

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

Lo hice funcionar con Vue 2.0 en un solo componente de archivo.

npm install moment en la carpeta donde tienes vue instalado

<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>

Aquí hay un ejemplo usando una biblioteca de envoltorio de terceros para Vue llamada vue-moment.

Además de vincular la instancia de Moment en el ámbito raíz de Vue, esta biblioteca incluye momenty durationfiltros.

Este ejemplo incluye la localización y está utilizando las importaciones del módulo ES6, un estándar oficial, en lugar de lo que requiere el sistema de módulos CommonJS de NodeJS.

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 });

Ahora puede usar la instancia de Moment directamente en sus plantillas de Vue sin ningún marcado adicional:

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

O los filtros:

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

// 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

Simplemente importaría el módulo de momento, luego usaría una función calculada para manejar mi lógica de momento () y devolvería un valor al que se hace referencia en la plantilla.

Si bien no he usado esto y, por lo tanto, no puedo hablar sobre su efectividad, encontré https://github.com/brockpetrie/vue-moment para una consideración alternativa

vue momento

Muy buen complemento para vue project y funciona muy bien con los componentes y el código existente. Disfruta los momentos ... 😍

// 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")}}