Использование в Vue

Для работы с Moment.js в Vue-проектах необходимо сначала установить библиотеку через npm или yarn:

npm install moment
# или
yarn add moment

После установки подключение может быть выполнено локально в компоненте или глобально через плагин Vue. Локальное подключение выполняется следующим образом:

import moment from 'moment';

export default {
  data() {
    return {
      currentDate: moment().format('YYYY-MM-DD')
    }
  }
}

Для глобального подключения, чтобы использовать Moment.js во всех компонентах, создаётся плагин:

import { createApp } from 'vue';
import App from './App.vue';
import moment from 'moment';

const app = createApp(App);

app.config.globalProperties.$moment = moment;

app.mount('#app');

Теперь доступ к Moment.js возможен через this.$moment в любом компоненте.

Форматирование дат

Moment.js предоставляет богатый функционал для форматирования дат. В Vue его можно использовать как в вычисляемых свойствах, так и напрямую в шаблонах.

Примеры форматирования:

computed: {
  formattedDate() {
    return this.$moment(this.currentDate).format('DD.MM.YYYY');
  },
  fullDateTime() {
    return this.$moment(this.currentDate).format('dddd, MMMM Do YYYY, h:mm:ss a');
  }
}

В шаблоне:

<p>Текущая дата: {{ formattedDate }}</p>
<p>Полная дата и время: {{ fullDateTime }}</p>

Основные форматные токены:

YYYY – год в 4 цифры
MM – месяц с ведущим нулём
DD – день месяца с ведущим нулём
HH – часы в 24-часовом формате
hh – часы в 12-часовом формате
mm – минуты
ss – секунды
a – am/pm

Работа с локализацией

Moment.js поддерживает множество языков, что особенно полезно для приложений на Vue с многоязычным интерфейсом.

Подключение локализации:

import 'moment/locale/ru';

moment.locale('ru');

После этого все форматированные даты автоматически будут использовать русские названия месяцев и дней недели.

computed: {
  localizedDate() {
    return this.$moment().format('LLLL'); // "пятница, 22 мая 2026 г., 14:30"
  }
}

Вычисление разницы между датами

Для вычислений используется метод diff:

computed: {
  daysUntilEvent() {
    const eventDate = this.$moment('2026-06-15');
    return eventDate.diff(this.$moment(), 'days');
  },
  hoursUntilEvent() {
    const eventDate = this.$moment('2026-06-15 18:00');
    return eventDate.diff(this.$moment(), 'hours');
  }
}

Метод diff принимает два параметра: единицу измерения (days, hours, minutes и др.) и булевый флаг для точного расчёта с дробными числами.

Манипуляции с датами

Moment.js позволяет легко добавлять или вычитать время:

computed: {
  nextWeek() {
    return this.$moment().add(7, 'days').format('DD.MM.YYYY');
  },
  lastMonth() {
    return this.$moment().subtract(1, 'months').format('DD.MM.YYYY');
  }
}

Поддерживаемые единицы: years, months, weeks, days, hours, minutes, seconds.

Использование Moment.js в шаблонах Vue

Для удобства часто создаются фильтры (Vue 2) или методы вычисляемых свойств (Vue 3). Пример метода для шаблона:

methods: {
  formatDate(date, format = 'DD.MM.YYYY') {
    return this.$moment(date).format(format);
  }
}

В шаблоне:

<p>Дата события: {{ formatDate(event.date, 'dddd, MMMM Do YYYY') }}</p>

Такой подход позволяет стандартизировать форматирование во всём приложении.

Реактивность и Moment.js

При использовании Moment.js с реактивными данными Vue важно помнить, что объекты Moment не являются реактивными по умолчанию. Для корректного обновления интерфейса лучше хранить даты в виде строк или ISO-формата, а преобразование в Moment выполнять при рендеринге:

data() {
  return {
    rawDate: '2026-05-22T14:30:00'
  }
},
computed: {
  displayDate() {
    return this.$moment(this.rawDate).format('DD.MM.YYYY HH:mm');
  }
}

Практические примеры интеграции

Календарь событий:

computed: {
  upcomingEvents() {
    return this.events
      .filter(event => this.$moment(event.date).isAfter(this.$moment()))
      .sort((a, b) => this.$moment(a.date).diff(this.$moment(b.date)));
  }
}

Отображение времени относительно текущего момента:

computed: {
  eventRelativeTime() {
    return this.$moment(this.rawDate).fromNow(); // "через 3 дня", "5 минут назад"
  }
}