Nuxt 时间

适用于 Nuxt 的 SSR 安全时间元素

特性

✨ SSR/SSG 安全渲染任何日期/时间
💪 防止客户端水合不匹配
🏁 尊重浏览器语言环境
✅ 渲染语义化的 <time> 元素

安装

安装并将 nuxt-time 添加到您的 nuxt.config 中。

npx nuxi@latest module add time

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

使用

要使用它，您可以在应用程序的任何位置使用 <NuxtTime> 组件。它将渲染一个符合规范的 <time> 元素。

它接受 datetime 和 locale（可选）属性，以及 Intl.DateTimeFormat 接受的任何属性（请参阅 MDN 参考）。**注意**：您可以通过 datetime 提供一个 Date 或 number（例如 Date.now()），它将被正确地渲染为 ISO 格式的日期。

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

相对时间格式

Nuxt Time 还支持使用 Intl.RelativeTimeFormat API 进行相对时间格式化。您可以通过将 relative 属性设置为 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>

💻 开发

克隆此存储库
使用 corepack enable 启用 Corepack
使用 pnpm install 安装依赖项
使用 pnpm dev:prepare 存根模块
运行 pnpm dev 以在开发模式下启动游乐场

许可证

用心制作 ❤️

根据 MIT 许可证发布。