nuxt-time
v1.0.2
Published
Safely render local dates and times on the server with Nuxt
Downloads
13,608
Readme
Nuxt Time
SSR-safe time element for Nuxt
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.