<NuxtTime>

Исходный код
Компонент <NuxtTime> отображает время в формате, удобном для локали, с согласованностью между сервером и клиентом.
Этот компонент доступен в Nuxt v3.17+.

Компонент <NuxtTime> выводит дату и время в формате, учитывающем локаль, с корректной семантикой HTML <time>. Рендер на сервере и клиенте согласован, без ошибок гидратации.

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

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

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

Входные параметры

datetime

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

Дата и время для отображения. Допустимо передавать:

  • объект Date
  • метку времени (число)
  • строку даты в формате 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 апреля 2026 г., 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>

В зависимости от настройки numeric возможен вывод вроде «3 дня назад» или «в прошлую пятницу».

Примеры

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

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