<NuxtTime>

Source
Компонент <NuxtTime> отображает время в формате с учётом локали с согласованностью сервер/клиент.
Компонент доступен в Nuxt v3.17+.

<NuxtTime> выводит дату и время в формате с учётом локали и с корректной семантикой тега <time>. Одинаковый рендер на сервере и клиенте, без рассинхронизации при гидрации.

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

Компонент можно использовать в любом месте приложения:

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Пропсы

datetime

  • Тип: Date | number | string
  • Обязательный: true

Отображаемые дата и время. Допускаются:

  • объект Date
  • timestamp (число)
  • строка даты в формате ISO
<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

  • Тип: string
  • Обязательный: false
  • По умолчанию: локаль браузера или сервера

Тег языка BCP 47 для форматирования (например 'en-US', 'fr-FR', 'ja-JP'):

<template>
  <NuxtTime
    :datetime="Date.now()"
    locale="fr-FR"
  />
</template>

Пропсы форматирования

Компонент принимает любые опции Intl.DateTimeFormat:

<template>
  <NuxtTime
    :datetime="Date.now()"
    year="numeric"
    month="long"
    day="numeric"
    hour="2-digit"
    minute="2-digit"
  />
</template>

Пример вывода: "22 апреля 2025 г., 08:30"

relative

  • Тип: boolean
  • Обязательный: false
  • По умолчанию: false

Включает относительное форматирование времени через Intl.RelativeTimeFormat:

<template>
  <!-- например "5 минут назад" -->
  <NuxtTime
    :datetime="Date.now() - 5 * 60 * 1000"
    relative
  />
</template>

Пропсы относительного времени

При relative: true можно передавать опции Intl.RelativeTimeFormat:

Так как style зарезервирован, используется проп relativeStyle.
<template>
  <NuxtTime
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
    relative
    numeric="auto"
    relative-style="long"
  />
</template>

Пример вывода: "3 дня назад" или "в прошлую пятницу" в зависимости от numeric.

Примеры

Базовое использование

<template>
  <NuxtTime :datetime="Date.now()" />
</template>

Своё форматирование

<template>
  <NuxtTime
    :datetime="Date.now()"
    weekday="long"
    year="numeric"
    month="short"
    day="numeric"
    hour="numeric"
    minute="numeric"
    second="numeric"
    time-zone-name="short"
  />
</template>

Относительное время

<template>
  <div>
    <p>
      <NuxtTime
        :datetime="Date.now() - 30 * 1000"
        relative
      />
      <!-- 30 секунд назад -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() - 45 * 60 * 1000"
        relative
      />
      <!-- 45 минут назад -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
        relative
      />
      <!-- через 2 дня -->
    </p>
  </div>
</template>

С указанием локали

<template>
  <div>
    <NuxtTime
      :datetime="Date.now()"
      locale="en-US"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="fr-FR"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="ja-JP"
      weekday="long"
    />
  </div>
</template>