fix(nuxt): `NuxtTime` relative time formatting props support #33552

L33Z22L11 · 2025-10-23T18:37:48Z

🔗 Linked issue

📚 Description

According to the NuxtTime docs, the <NuxtTime> component should support the numeric and style props, as defined by Intl.RelativeTimeFormat options, but neither is implemented.

This PR implements the numeric prop for <NuxtTime>.

The style option cannot be added directly since style is a reserved Vue attribute. Further discussion needed.

bolt-new-by-stackblitz · 2025-10-23T18:37:52Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-10-23T18:40:55Z

Walkthrough

A new numeric prop has been added to the NuxtTimeProps interface in the NuxtTime component, accepting values of either 'always' or 'auto'. To validate this addition, a corresponding test case has been introduced that verifies the component correctly handles this prop when rendering relative time expressions, confirming that a datetime from 24 hours prior displays as "yesterday" using the English (GB) locale.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

The changes are straightforward and homogeneous in nature: a type definition extension paired with a single test case. The prop addition requires minimal review, and the test introduces no complex assertions or edge cases requiring extensive scrutiny. Both modifications follow consistent patterns with no structural alterations or logic density concerns.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "fix(nuxt): `NuxtTime` relative time formatting props support" is concise, specific, and directly related to the changeset. It clearly identifies the component being modified (`NuxtTime`), the type of change (adding props support), and the functional area (relative time formatting). The title accurately reflects the main objective of the PR, which is to implement the `numeric` prop for relative time formatting as specified in the Intl.RelativeTimeFormat options. The title follows conventional commit format and conveys the primary change at a high level without being vague or overly broad.
Description Check	✅ Passed	The pull request description is clearly related to the changeset. It explains that the NuxtTime documentation states the component should support `numeric` and `style` props per Intl.RelativeTimeFormat options, but these were not implemented. The description confirms that this PR implements the `numeric` prop and provides context regarding why the `style` prop cannot be added (reserved Vue attribute). The description directly connects the changes made in the PR to the documented requirements and rationale for the implementation.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

packages/nuxt/src/app/components/nuxt-time.vue (1)

26-26: Good addition, aligns with Intl.RelativeTimeFormat API.

The numeric prop correctly implements support for the Intl.RelativeTimeFormat option with the proper type signature.

Note: The numeric prop will be spread to Intl.DateTimeFormat when relative: false (line 66), where it's not a valid option. Whilst it will likely be silently ignored, you could optionally filter it out from rest when not in relative mode for cleaner code.

test/nuxt/nuxt-time.test.ts (1)

45-61: Excellent test coverage for the numeric: 'auto' case.

The test correctly validates that numeric: 'auto' produces natural language output ("yesterday") rather than the default numeric format ("1 day ago"). The 24-hour offset is appropriate for reliably triggering this behaviour.

Optionally, you could add a test case for numeric: 'always' to explicitly document the difference in behaviour, though the default is already covered by the existing relative time test.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 08900f6 and 349e494.

📒 Files selected for processing (2)

packages/nuxt/src/app/components/nuxt-time.vue (1 hunks)
test/nuxt/nuxt-time.test.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use <script setup lang="ts"> and the composition API when creating Vue components

Files:

packages/nuxt/src/app/components/nuxt-time.vue

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Follow standard TypeScript conventions and best practices

Files:

test/nuxt/nuxt-time.test.ts

**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Write unit tests for core functionality using vitest

Files:

test/nuxt/nuxt-time.test.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

GitHub Check: test-fixtures (windows-latest, built, rspack, default, manifest-on, json, lts/-1)
GitHub Check: typecheck (windows-latest, bundler)
GitHub Check: code

pkg-pr-new · 2025-10-23T18:41:47Z

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@33552

nuxt

npm i https://pkg.pr.new/nuxt@33552

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@33552

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@33552

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@33552

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@33552

commit: 349e494

codspeed-hq · 2025-10-23T18:53:14Z

CodSpeed Performance Report

Merging #33552 will not alter performance

_{Comparing L33Z22L11:fix/nuxt-date/relative-options (349e494) with main (08900f6)}

Summary

✅ 10 untouched

Flo0806 · 2025-10-23T19:32:18Z

#33546 should be mentioned, I think

fix(nuxt): NuxtTime relative time formatting props support

349e494

L33Z22L11 requested a review from danielroe as a code owner October 23, 2025 18:37

github-actions bot added 4.x bug labels Oct 23, 2025

coderabbitai bot reviewed Oct 23, 2025

View reviewed changes

danielroe approved these changes Oct 23, 2025

View reviewed changes

danielroe merged commit c2e1998 into nuxt:main Oct 24, 2025
100 of 101 checks passed

github-actions bot mentioned this pull request Oct 24, 2025

v4.2.0 #33425

Merged

danielroe pushed a commit that referenced this pull request Oct 25, 2025

fix(nuxt): add NuxtTime relative time numeric prop (#33552)

65267bf

github-actions bot mentioned this pull request Oct 25, 2025

v3.20.0 #33566

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(nuxt): `NuxtTime` relative time formatting props support #33552

fix(nuxt): `NuxtTime` relative time formatting props support #33552

L33Z22L11 commented Oct 23, 2025

Uh oh!

bolt-new-by-stackblitz bot commented Oct 23, 2025

Uh oh!

coderabbitai bot commented Oct 23, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

pkg-pr-new bot commented Oct 23, 2025

Uh oh!

codspeed-hq bot commented Oct 23, 2025

Uh oh!

Flo0806 commented Oct 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

fix(nuxt): NuxtTime relative time formatting props support #33552

fix(nuxt): NuxtTime relative time formatting props support #33552

Conversation

L33Z22L11 commented Oct 23, 2025

🔗 Linked issue

📚 Description

Uh oh!

bolt-new-by-stackblitz bot commented Oct 23, 2025

Uh oh!

coderabbitai bot commented Oct 23, 2025

Walkthrough

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new bot commented Oct 23, 2025

Uh oh!

codspeed-hq bot commented Oct 23, 2025

CodSpeed Performance Report

Merging #33552 will not alter performance

Summary

Uh oh!

Flo0806 commented Oct 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix(nuxt): `NuxtTime` relative time formatting props support #33552

fix(nuxt): `NuxtTime` relative time formatting props support #33552