# Format Relative Time (VUE)



## Usage

The relative time formatting logic is handled by the native `Intl.RelativeTimeFormat` API and smartly cached to avoid
performance issues when using the same locale and options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.RelativeTime` component to format a relative time with default options.

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'
</script>

<template>
  <div :class="styles.Inline">
    <span :class="styles.InlineLabel">Last updated</span>
    <span :class="styles.InlineValue">
      <Format.RelativeTime :value="new Date('2025-05-05')" />
    </span>
  </div>
</template>
```

### Short

Use the `style="short"` prop to format the relative time in short format.

```vue
<script setup lang="ts">
import { Format } from '@ark-ui/vue/format'
import styles from 'styles/format.module.css'
</script>

<template>
  <div :class="styles.Inline">
    <span :class="styles.InlineLabel">Edited</span>
    <span :class="styles.InlineValue">
      <Format.RelativeTime :value="new Date('2025-05-05')" style="short" />
    </span>
  </div>
</template>
```