# > The component displays time in a locale-friendly format with server-client consistency. This component is available in Nuxt v3.17+. The `` component lets you display dates and times in a locale-friendly format with proper `` HTML semantics. It ensures consistent rendering between server and client without hydration mismatches. ## Usage You can use the `` component anywhere in your app: ```vue ``` ## Props ### `datetime` - Type: `Date | number | string` - Required: `true` The date and time value to display. You can provide: - A `Date` object - A timestamp (number) - An ISO-formatted date string ```vue ``` ### `locale` - Type: `string` - Required: `false` - Default: Uses the browser or server's default locale The [BCP 47 language tag](https://datatracker.ietf.org/doc/html/rfc5646) for formatting (e.g., 'en-US', 'fr-FR', 'ja-JP'): ```vue ``` ### Formatting Props The component accepts any property from the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) options: ```vue ``` This would output something like: "April 22, 2025, 08:30 AM" ### `relative` - Type: `boolean` - Required: `false` - Default: `false` Enables relative time formatting using the Intl.RelativeTimeFormat API: ```vue ``` ### Relative Time Formatting Props When `relative` is set to `true`, the component also accepts properties from [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat): Due to `style` being a reserved prop, `relativeStyle` prop is used instead. ```vue ``` This would output something like: "3 days ago" or "last Friday" depending on the `numeric` setting. ## Examples ### Basic Usage ```vue ``` ### Custom Formatting ```vue ``` ### Relative Time ```vue ``` ### With Custom Locale ```vue ``` --- - [Source](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-time.vue)