Skip to content

fix(nuxt): add NuxtTime relative time relativeStyle prop #33557

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Oct 24, 2025
Merged

fix(nuxt): add NuxtTime relative time relativeStyle prop #33557

merged 3 commits into from
Oct 24, 2025

Conversation

@NamesMT
Copy link
Contributor

@NamesMT NamesMT commented Oct 24, 2025

🔗 Linked issue

Resolves #33546

📚 Description

Following the agreement of #33546 (comment) and #33546 (comment)

This PR adds relativeStyle prop to config the style of relative time rendering, also noting it to the docs.

@NamesMT NamesMT requested a review from danielroe as a code owner October 24, 2025 04:43
@bolt-new-by-stackblitz
Copy link

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

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@coderabbitai
Copy link

coderabbitai bot commented Oct 24, 2025

Walkthrough

The pull request introduces two new props (numeric and relativeStyle) to the NuxtTime component to enhance relative time formatting capabilities. The component implementation is updated to pass relativeStyle as the style option to Intl.RelativeTimeFormat, and data attribute parsing logic is modified to map the relativeStyle data attribute to the correct option key. Documentation is updated to clarify that style is a reserved prop and that relative-style should be used instead. Test cases are added to validate the new props.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes involve heterogeneous modifications across multiple areas of the component: new prop declarations, updated formatter logic, type system changes for SSR data attribute handling, and corresponding test coverage. Whilst not extensive in volume, the logic requires verification of how relativeStyle flows through the data attribute parsing, props destructuring, and formatter invocation. The interaction between reserved prop naming and the renaming to relative-style also warrants careful review.

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 (3 passed)
Check name Status Explanation
Title Check ✅ Passed The pull request title "fix(nuxt): add NuxtTime relative time relativeStyle prop" clearly and specifically describes the main objective of the changeset. It accurately reflects that a new relativeStyle prop is being added to the NuxtTime component to control relative time formatting. The title is concise (60 characters, 7 words), avoids vague language, and provides sufficient clarity for readers scanning the commit history to understand the primary change.
Linked Issues Check ✅ Passed The pull request addresses the primary requirement of linked issue #33546, which reports that the style prop for relative time formatting does not work as documented. The PR resolves this by introducing a relativeStyle prop (necessary because style is a reserved prop in Vue) that maps to the style option for Intl.RelativeTimeFormat, enabling users to configure relative time styling. Additionally, the PR adds a numeric prop for controlling numeric formatting, and both props are tested with appropriate test cases. The documentation is also updated to clarify the use of relativeStyle instead of style. These changes align with the objective to restore relative time formatting functionality.
Out of Scope Changes Check ✅ Passed The changes appear to be appropriately scoped to address the linked issue. The code modifications introduce two new props (relativeStyle and numeric) both of which are standard Intl.RelativeTimeFormat options that were referenced in the issue's documentation link. The PR includes corresponding documentation updates and comprehensive test coverage for both new props. All changes directly support the objective of enabling proper relative time formatting configuration as described in issue #33546.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b51cb30 and fd2904e.

📒 Files selected for processing (3)
  • docs/3.api/1.components/13.nuxt-time.md (1 hunks)
  • packages/nuxt/src/app/components/nuxt-time.vue (3 hunks)
  • test/nuxt/nuxt-time.test.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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
**/*.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
🪛 LanguageTool
docs/3.api/1.components/13.nuxt-time.md

[uncategorized] ~108-~108: Loose punctuation mark.
Context: ..., relativeStyle prop is used instead. :: ```vue <NuxtTime :da...

(UNLIKELY_OPENING_PUNCTUATION)

⏰ 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). (2)
  • GitHub Check: build
  • GitHub Check: code
🔇 Additional comments (7)
docs/3.api/1.components/13.nuxt-time.md (2)

107-109: Excellent addition to clarify the reserved prop issue.

The warning clearly explains why relativeStyle is used instead of style, which will help users avoid confusion.

111-120: Correct usage example for the new prop.

The example properly demonstrates using relative-style in kebab-case (Vue template convention) and shows it alongside numeric to illustrate combined usage.

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

45-61: Good test coverage for the numeric prop.

The test correctly validates that numeric: 'auto' produces natural language output ("yesterday") instead of "1 day ago". This aligns with the Intl.RelativeTimeFormat behaviour.

63-79: Excellent test for the new relativeStyle prop.

This test validates that relativeStyle: 'short' produces the abbreviated format ("5 min ago" instead of "5 minutes ago"), directly addressing the functionality requested in issue #33546.

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

30-33: Well-typed new props for relative time formatting.

The numeric and relativeStyle props are correctly typed to match the Intl.RelativeTimeFormat options, ensuring type safety whilst providing the flexibility needed for relative time customisation.

64-70: Correct implementation of the relativeStyle mapping.

The key fix is here: relativeStyle prop is correctly mapped to the style option when creating the Intl.RelativeTimeFormat instance. This elegantly solves the original issue where the reserved style prop couldn't be used directly.

122-132: Proper SSR hydration handling for the new prop.

The hydration code correctly maps the data-relative-style attribute back to the style option for Intl.RelativeTimeFormat. This ensures consistent formatting between server-rendered and client-side rendered content.

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.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 24, 2025

Open in StackBlitz

@nuxt/kit

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

nuxt

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

@nuxt/rspack-builder

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

@nuxt/schema

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

@nuxt/vite-builder

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

@nuxt/webpack-builder

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

commit: fd2904e

@codspeed-hq
Copy link

codspeed-hq bot commented Oct 24, 2025

CodSpeed Performance Report

Merging #33557 will not alter performance

Comparing NamesMT:fix/nuxtTimeRelativeProps (fd2904e) with main (74ca73c)1

Summary

✅ 10 untouched

Footnotes

  1. No successful run was found on main (b51cb30) during the generation of this report, so 74ca73c was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

danielroe
danielroe approved these changes Oct 24, 2025
View reviewed changes
Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you ❤️

@danielroe danielroe merged commit 56a257a into nuxt:main Oct 24, 2025
57 of 58 checks passed
@github-actions github-actions bot mentioned this pull request Oct 24, 2025
Merged
danielroe pushed a commit that referenced this pull request Oct 25, 2025
@NamesMT @danielroe
fix(nuxt): add NuxtTime relative time relativeStyle prop (#33557)
275c5ba
@github-actions github-actions bot mentioned this pull request Oct 25, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@danielroe danielroe danielroe approved these changes

Assignees

No one assigned

Labels

4.x bug

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

NuxtTime relative formatting style="short" does not work

2 participants

@NamesMT @danielroe