Nuxt Time

SSR-safe time element for Nuxt 3

• ✨  Changelog
• ▶️  Online playground

Features

• ✨ SSR-safe rendering of any date
• 💪 Prevents hydration mismatch on client side
• 🏁 Respects browser locale

Installation

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'],
})

Usage

To use, you can use the <NuxtTime> component anywhere in your app. It accepts datetime and locale (optional) properties, along with any property accepted by Intl.DateTimeFormat (see MDN reference).

<template>
  <!-- Date.now() will safely respect the date rendered on the server, not the client-side hydration. -->
  <!-- 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>

💻 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

License

Made with ❤️

Published under the MIT License.