Nuxt Time

SSR-safe time element for Nuxt

• ✨  Changelog
• ▶️  Online playground

Features

• ✨ SSR/SSG-safe rendering of any date/time
• 💪 Prevents hydration mismatch on client
• 🏁 Respects browser locale
• ✅ Renders semantic <time> element

Installation

Install and add nuxt-time to your nuxt.config.

npx nuxi@latest module add time

export default defineNuxtConfig({
  modules: ['nuxt-time'],
})

Usage

To use, you can use the <NuxtTime> component anywhere in your app. It will render a spec-compliant <time> element.

It accepts datetime and locale (optional) properties, along with any property accepted by Intl.DateTimeFormat (see MDN reference). Note: you can provide a Date or number (e.g. Date.now()) via datetime and it will be rendered correctly as an ISO-formatted date.

<template>
  <!--
    Date.now() will safely respect the time on the server, not on the
    client. What's more, there will be no flash between server
    and client locale formatting.
  -->
  <NuxtTime :datetime="Date.now()" second="numeric" month="long" day="numeric" />
</template>

Relative Time Formatting

Nuxt Time also supports relative time formatting using the Intl.RelativeTimeFormat API. You can enable this feature by setting the relative prop to true.

<template>
  <!--
    This will display the time relative to the current time, e.g., "5 minutes ago"
  -->
  <NuxtTime :datetime="Date.now() - 5 * 60 * 1000" relative />
</template>

💻 Development

• Clone this repository
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

Made with ❤️

Published under the MIT License.