O componente <NuxtTime> permite que você exiba datas e horas em um formato amigável ao local com semântica HTML <time> adequada. Ele garante uma renderização consistente entre servidor e cliente sem discrepâncias de hidratação.

Uso

Você pode usar o componente <NuxtTime> em qualquer lugar do seu aplicativo:

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

Props

datetime

• Tipo: Date | number | string
• Obrigatório: true

O valor de data e hora a ser exibido. Você pode fornecer:

• Um objeto Date
• Um timestamp (número)
• Uma string de data formatada em ISO

<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>

locale

• Tipo: string
• Obrigatório: false
• Padrão: Usa o local padrão do navegador ou servidor

O código de idioma BCP 47 para formatação (por exemplo, 'en-US', 'fr-FR', 'ja-JP'):

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

Props de Formatação

O componente aceita qualquer propriedade das opções do Intl.DateTimeFormat:

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

Isso resultaria em algo como: "22 de abril de 2025, 08:30 AM"

relative

• Tipo: boolean
• Obrigatório: false
• Padrão: false

Habilita a formatação de tempo relativo usando a API Intl.RelativeTimeFormat:

<template>
  <!-- Mostra algo como "5 minutos atrás" -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>

Props de Formatação de Tempo Relativo

Quando relative está definido como true, o componente também aceita propriedades do Intl.RelativeTimeFormat:

<template>
  <NuxtTime 
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000" 
    relative 
    numeric="auto"
    style="long"
  />
</template>

Isso resultaria em algo como: "3 dias atrás" ou "sexta-feira passada" dependendo da configuração numeric.

Exemplos

Uso Básico

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

Formatação Personalizada

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

Tempo Relativo

<template>
  <div>
    <p>
      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
      <!-- 30 segundos atrás -->
    </p>
    <p>  
      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
      <!-- 45 minutos atrás -->
    </p>
    <p>
      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
      <!-- em 2 dias -->
    </p>
  </div>
</template>

Com Local Personalizado

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