Nuxt 2 is reaching End-of-Life on June 30th, 2024.


Safely render local dates and times on the server with Nuxt

Nuxt Time

npm versionnpm downloadsGithub ActionsCodecov

SSR-safe time element for Nuxt 3


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


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

# Whichever matches your package manager
pnpm add -D nuxt-time
npm install -D nuxt-time
yarn add -D nuxt-time
export default defineNuxtConfig({
  modules: ['nuxt-time'],


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. via datetime and it will be rendered correctly as an ISO-formatted date.

  <!-- 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="" second="numeric" month="long" day="numeric" />

💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Stub module with pnpm dev:prepare
  • Run pnpm dev to start playground in development mode


Made with ❤️

Published under the MIT License.