El componente <NuxtTime> te permite mostrar fechas y horas en un formato amigable para el idioma local con la semántica HTML adecuada de <time>. Asegura una representación consistente entre el servidor y el cliente sin desajustes de hidratación.

Uso

Puedes usar el componente <NuxtTime> en cualquier parte de tu aplicación:

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

Props

datetime

• Tipo: Date | number | string
• Requerido: true

El valor de fecha y hora a mostrar. Puedes proporcionar:

• Un objeto Date
• Un timestamp (número)
• Una cadena de fecha en formato ISO

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

locale

• Tipo: string
• Requerido: false
• Predeterminado: Usa el idioma predeterminado del navegador o del servidor

La etiqueta de idioma BCP 47 para el formato (por ejemplo, 'en-US', 'fr-FR', 'ja-JP'):

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

Props de Formato

El componente acepta cualquier propiedad de las opciones de Intl.DateTimeFormat:

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

Esto mostraría algo como: "22 de abril de 2025, 08:30 AM"

relative

• Tipo: boolean
• Requerido: false
• Predeterminado: false

Habilita el formato de tiempo relativo usando la API Intl.RelativeTimeFormat:

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

Props de Formato de Tiempo Relativo

Cuando relative está configurado en true, el componente también acepta propiedades de Intl.RelativeTimeFormat:

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

Esto mostraría algo como: "hace 3 días" o "el viernes pasado" dependiendo de la configuración de numeric.

Ejemplos

Uso Básico

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

Formato Personalizado

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

Tiempo Relativo

<template>
  <div>
    <p>
      <NuxtTime :datetime="Date.now() - 30 * 1000" relative />
      <!-- hace 30 segundos -->
    </p>
    <p>  
      <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />
      <!-- hace 45 minutos -->
    </p>
    <p>
      <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />
      <!-- en 2 días -->
    </p>
  </div>
</template>

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