---
title: "<NuxtTime>"
description: " <NuxtTime> 组件以符合区域设置且服务器与客户端一致的格式显示时间。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/components/nuxt-time"
---
# <NuxtTime>

> <NuxtTime> 组件以符合区域设置且服务器与客户端一致的格式显示时间。

<important>

该组件在 Nuxt v3.17+ 中可用。

</important>

`<NuxtTime>` 组件可让你以符合区域设置的格式显示日期和时间，并具备正确的 `<time>` HTML 语义。它确保服务器与客户端之间渲染一致，避免 hydration 不匹配。

## 用法

你可以在应用的任何地方使用 `<NuxtTime>` 组件：

```vue [app/app.vue]
<template>
  <NuxtTime :datetime="Date.now()" />
</template>
```

## Props

### `datetime`

- 类型: `Date | number | string`
- 必填: `true`

要显示的日期和时间值。可以提供：

- 一个 `Date` 对象
- 时间戳（数字）
- ISO 格式的日期字符串

```vue [app/app.vue]
<template>
  <NuxtTime :datetime="Date.now()" />
  <NuxtTime :datetime="new Date()" />
  <NuxtTime datetime="2023-06-15T09:30:00.000Z" />
</template>
```

### `locale`

- 类型: `string`
- 必填: `false`
- 默认: 使用浏览器或服务器的默认区域设置

用于格式化的 [BCP 47 语言标签](https://datatracker.ietf.org/doc/html/rfc5646)（例如 'en-US'、'fr-FR'、'ja-JP'）：

```vue [app/app.vue]
<template>
  <NuxtTime
    :datetime="Date.now()"
    locale="fr-FR"
  />
</template>
```

### 格式化 Props

组件接受来自 [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) 的任意选项属性：

```vue [app/app.vue]
<template>
  <NuxtTime
    :datetime="Date.now()"
    year="numeric"
    month="long"
    day="numeric"
    hour="2-digit"
    minute="2-digit"
  />
</template>
```

这将输出类似："2025年4月22日 08:30"

### `relative`

- 类型: `boolean`
- 必填: `false`
- 默认: `false`

启用使用 Intl.RelativeTimeFormat API 的相对时间格式化：

```vue [app/app.vue]
<template>
  <!-- 显示类似“5 分钟前”的内容 -->
  <NuxtTime
    :datetime="Date.now() - 5 * 60 * 1000"
    relative
  />
</template>
```

### 相对时间格式化 Props

当 `relative` 设置为 `true` 时，组件还接受来自 [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat) 的属性：

<warning>

由于 `style` 是一个保留属性，因此使用 `relativeStyle` 属性代替。

</warning>

```vue [app/app.vue]
<template>
  <NuxtTime
    :datetime="Date.now() - 3 * 24 * 60 * 60 * 1000"
    relative
    numeric="auto"
    relative-style="long"
  />
</template>
```

这将输出类似："3 天前" 或根据 `numeric` 设置输出 "上周五"。

## 示例

### 基本用法

```vue [app/app.vue]
<template>
  <NuxtTime :datetime="Date.now()" />
</template>
```

### 自定义格式

```vue [app/app.vue]
<template>
  <NuxtTime
    :datetime="Date.now()"
    weekday="long"
    year="numeric"
    month="short"
    day="numeric"
    hour="numeric"
    minute="numeric"
    second="numeric"
    time-zone-name="short"
  />
</template>
```

### 相对时间

```vue [app/app.vue]
<template>
  <div>
    <p>
      <NuxtTime
        :datetime="Date.now() - 30 * 1000"
        relative
      />
      <!-- 30 秒前 -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() - 45 * 60 * 1000"
        relative
      />
      <!-- 45 分钟前 -->
    </p>
    <p>
      <NuxtTime
        :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000"
        relative
      />
      <!-- 2 天后 -->
    </p>
  </div>
</template>
```

### 使用自定义区域设置

```vue [app/app.vue]
<template>
  <div>
    <NuxtTime
      :datetime="Date.now()"
      locale="en-US"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="fr-FR"
      weekday="long"
    />
    <NuxtTime
      :datetime="Date.now()"
      locale="ja-JP"
      weekday="long"
    />
  </div>
</template>
```

---

- [源码](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-time.vue)


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.